一、对阿里巴巴矢量库进行的操作

1、首先点进阿里巴巴矢量库（阿里巴巴矢量图标库官方文档 https://www.iconfont.cn/）
2、进行账号注册
3、选中想要的图标加入到购物车

4、点购物车会出现下面的页面，然后选择添加至项目

5、加入项目中选择你想要把图标添加到哪个项目中，如果没有要加入的项目（像我这种刚刚引入阿里巴巴矢量库这种情况）可以新建项目，新建项目名称最好与本身项目名称一致（方便查看），当然不一样也可以，影响不大，因为我们是要下载到本地的
6、点击确定，到下面的页面，发现下面已经存在了你想要添加的图标了

7、选中unicode，点击下载到本地，会生成一个压缩包将其进行解压缩。

8、我们需要下面四个文件放到我们的项目中

9、先不要关掉浏览器页面，下面还会用到阿里巴巴矢量库页面。
二、对项目进行的操作
1、我是在项目的common文件夹里新建了icon文件夹放入上面解压出的四个文件，你们可以自己决定放在哪里，也有放在static里面的

2、在App.vue中引入iconfont.css文件，注意文件路径

3、点击iconfont.css文件，修改红框部分代码

得到修改部分代码操作：
点击查看在线链接




将iconfont.css文件对应的部分修改，相信不用我都说，大家都能找到。然后每个url前加上https:就可以啦！

三、在vue文件中使用，亲测可用！

        <i class="iconfont icon-all"></i><i class="iconfont icon-aligne-bottom2-fill"></i><i class="iconfont icon-chakan"></i><i class="iconfont icon-column-4"></i>

补充一点：我遇到个新问题，如果有需求在main.js引入，但是打包apk报错main.js找不到样式文件的话，就把main.js引入样式文件语句注释掉。没有图标的话，App文件下面语句后加个逗号。

@import './common/icon/iconfont.css'; /* 逗号，重要的逗号 */