uniapp引用iconfont图标库（阿里矢量图）

160次阅读次阅读
2条评论

第一步：进入阿里矢量图官网https://www.iconfont.cn/选择你需要的图标加入购物车，全部选择完毕后添加至项目 uniapp引用iconfont图标库（阿里矢量图） 第二步：进入我的项目中后选择Unicode后生成代码，粘贴至Uniapp项目中的App.vue中。 uniapp引用iconfont图标库（阿里矢量图） uniapp引用iconfont图标库（阿里矢量图）

/*每个页面公共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>
发表于：前端笔记
2021-09-08
# uniapp# uniapp图标# uniapp教程
复制链接
1
赏
admin
版权声明：本站原创文章，由admin2021-09-08发表，共计1460字。
转载提示：除特殊说明外本站文章皆由CC-4.0协议发布，转载请注明出处。
uniapp隐藏手机号中间四位
inotify+rsync文件实时同步
Centos7安装JDK1.8
uniapp获取今日和昨日0点时间戳
评论（2条评论）
常瑞 评论达人 LV.1
2021-12-09 18:49:35 回复

阿里的这个网站很不错

    admin 博主
    2021-12-10 03:45:22 回复

    @常瑞 是的，现在需要用到一些图标或者插图素材都会去上面找，主要还是能白嫖！哈哈哈