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