第一步:进入阿里矢量图官网https://www.iconfont.cn/选择你需要的图标加入购物车,全部选择完毕后添加至项目
第二步:进入我的项目中后选择Unicode后生成代码,粘贴至Uniapp项目中的App.vue中。
/*每个页面公共css */ @font-face { font-family: 'iconfont'; /* Project id 2797372 */ src: url('https://at.alicdn.com/t/font_2797372_unxwb953v3.woff2?t=1631074850573') format('woff2'), url('https://at.alicdn.com/t/font_2797372_unxwb953v3.woff?t=1631074850573') format('woff'), url('https://at.alicdn.com/t/font_2797372_unxwb953v3.ttf?t=1631074850573') format('truetype'); } .iconfont { /* font-family需要和自定义的相同 */ font-family: "iconfont" !important; font-size: 24rpx; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
@font-face{}是你复制的代码,把url的链接前加上https:。iconfont里可以设置默认样式。
第三步:页面代码中可以直接引用iconfont的图标了,图标必须是你项目里的哈。
//为了不让网页直接渲染,我把icon图标的代码加了空格,细心点可以注意到,用的时候直接改成你自己的就行了。 <text class="iconfont">& # x e 6 0 d ;</text>
阿里的这个网站很不错
@常瑞 是的,现在需要用到一些图标或者插图素材都会去上面找,主要还是能白嫖!哈哈哈