由于在使用element-ui的时候，其图标数量太少，项目需要的又没有；而且大小几乎不能调整，于是有了引入其他图标库的想法。

阿里图标库生成代码

1.去阿里图标矢量图标库将想要的图标添加入库

你可以搜索你需要的图标的关键词，这样一个一个图标去添加又准确又快，不建议你一个一个图标库去看，很麻烦，如果你有明确项目需要，建议你用搜索的方式。

2.再去购物车中将图标添加到项目。

3.1将图标代码包下载到本地再引入到vue项目中。

3.1.1解压放到assets文件夹下

3.1.2 在mian.js中全局引入图标

注意是引用iconfont.css哦

3.1.3 页面中使用

直接把这样的代码放页面即可，具体使用那个图标到线上去赋值改图标的代码到iconfont后面替换即可。

3.1.4改变图标大小和颜色

改所有图标大小直接进入你引入的文件中的iconfont.css中

具体改哪个图标的大小，直接针对哪个图标改它的font-size即可，改颜色就增加color属性即可

<i class="iconfont icon-alarm" style="font-size: 20px;color:color: #409EFF"></i>

3.2将图标以线上方式引入项目

3.2.1 在index.html中引入资源

找到index.html文件，引入资源

3.2.2 页面中使用

直接把这样的代码放页面即可，具体使用那个图标到线上去赋值改图标的代码到iconfont后面替换即可。

3.2.3 改变图标大小和颜色

分为线上修改或者本地修改都可
线上修改的话



本地修改的话可以直接这样修改

<i class="iconfont icon-alarm" style="font-size: 20px;color:color: #409EFF"></i>

这样阿里图标就导入成功了，如果有疑问，欢迎评论区留言。