1.登录阿里矢量图标库官网
首页.png
2.选中所需要的图标，添加至购物车
添加购物车.png
3.把购物车里面的图标添加到项目
添加至项目.png
4.点击fontclass,再点击下载到本地
下载.png
5.在vue项目里面的assets(静态资源文件)新建css文件夹，在css文件夹新建iconfont文件夹，把下面四个文件放在iconfont文件夹里面
新建iconfont.png
6.把下图iconfont.css文件放在css文件夹里面，和iconfont文件夹同级
iconfont.png
同级文件.png
7.在main.js入口文件中引入
main入口文件.png
8.在项目中使用，所有图标都是用两个类名，第一个是固定的：iconfont，第二个就是第二张图片里面的那里（类名）
使用1.png
使用2.png
后续
1.如果在项目使用的过程中，发现缺少一些图标，那么则可以继续使用上面的步骤，重复一遍，不过要更改文件名，不然后覆盖
更改名字后.png
2.然后在iconfont1.css那里也有更改
更改文件名.png
3.最后在main.js里面引入就行了，可以看后续的第一张图
网友评论