uni-app怎么引用使用阿里巴巴矢量图标库iconfont

时间:2024-03-30 15:49:34

uni-app引用使用阿里巴巴矢量图标库iconfont

看了好几篇使用说明和官方说明总结出来的用法

1.首先右击项目新建一个目录iconfont(命名随便),右击iconfont文件夹选6.css文件,命名icon.css

2.打开网页搜索iconfont,选择uni-app怎么引用使用阿里巴巴矢量图标库iconfont
搜索想要的图标,把看中心意的小图标放入购物车里,uni-app怎么引用使用阿里巴巴矢量图标库iconfont
然后点击右上角的购物车,新建一个文件夹存放这次收藏的图标uni-app怎么引用使用阿里巴巴矢量图标库iconfont
点击生成
uni-app怎么引用使用阿里巴巴矢量图标库iconfont
将生成的代码复制好,页面也别关,后面还需要复制图标下的代码
uni-app怎么引用使用阿里巴巴矢量图标库iconfont
3.将复制的代码粘贴到icon.css文件里
uni-app怎么引用使用阿里巴巴矢量图标库iconfont4.在App.vue的style里全局引用,这里可以全局定义一个官方使用icon的样式
.iconfont{
font-family:“iconfont” !important;
font-size:16px;font-style:normal;
-webkit-font-smoothing: antialiased;
-webkit-text-stroke-width: 0.2px;
-moz-osx-font-smoothing: grayscale;}
uni-app怎么引用使用阿里巴巴矢量图标库iconfont

5.最后在页面里把标签里的代码 换成阿里巴巴图标库的代码即可
uni-app怎么引用使用阿里巴巴矢量图标库iconfont
uni-app怎么引用使用阿里巴巴矢量图标库iconfont

6.最后提一下,新加进购物车和项目的图标,要重新获取代码放入css文件里,实行第三点操作,后面的使用步骤一样