矢量库地址:https://www.iconfont.cn/?spm=a313x.7781069.1998910419.d4d0a486a
矢量库的线上使用方式
第一步:将所需要的图标添加到购物车中
![](https://i-blog.csdnimg.cn/blog_migrate/203236d3cb5c41e76ffe4af3e970c0e5.png)
第二步:打开购物车
![](https://i-blog.csdnimg.cn/blog_migrate/08bda5fd6d16c52d095d7184ad61a617.png)
第三步:添加至项目,没有的话新建一个
第四步:点击打开我的项目
![](https://i-blog.csdnimg.cn/blog_migrate/2e3656ac2e0c6244da3486441422dced.png)
第五步:第一个Unicode方法
点击获取线上链接
![](https://i-blog.csdnimg.cn/blog_migrate/e4e373ad5d213fa727d31594482b878b.png)
将该线上链接添加到需要矢量图标的文件的css文件里面
![](https://i-blog.csdnimg.cn/blog_migrate/6d1f63e5208bf244a579df9c6b0c92ae.png)
在该css文件里面再添加一段代码
.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;
}
注意这个class类名,之前我的老是出不来就是因为再调用的时候没有给HTML标签添加iconfont这个类名
第六步:复制所用图标的代码
![](https://i-blog.csdnimg.cn/blog_migrate/1121699c069ff601a197e98036b4761e.png)
第七步:将该代码添加到HTML文档里面
![](https://i-blog.csdnimg.cn/blog_migrate/a027cdd9c239a552b902eaebafaf91dc.png)
一定要设置class名
最后就可以显示出来了