vue中通过Font class方式使用阿里图标库

**

vue中通过Font class方式使用阿里图标库

**
1.去阿里巴巴矢量图标库link，登录，找到自己想要的图标，并添加入库。

2.选好图标后点击箭头所指

3.点击【添加至项目】，注意，在这之前要登陆阿里巴巴矢量图标库

4.没有项目，可以新建一个项目

5.点击【确定】

6.在新建的项目中（我刚才新建的项目的名字是vue），选择Font class方式，点击【下载至本地】

7.选好保存地址后，点击【保存】，我选择保存的地址是桌面

8.解压刚才下载的zip格式的文件，要打开两次，第一次是下图这种的

第二次是这种的，ctrl a全选，ctrl c复制

9.在项目的assets文件夹下新建一个iconfont文件夹，将刚才复制的那些文件粘贴进去。

10.在项目的main.js中引入一句话

import '../src/assets/iconfont/iconfont.css';

11.回到阿里巴巴矢量图标库link，在【资源管理】里点击【我的项目】

12.找到自己刚才建的项目，记住你想要加入的图标的名字，就是我画线的部分，或者用鼠标在底下划一下复制名字。

13.进入你的vue页面，复制箭头所指的这段代码

/*// 阿里字体图标设置*/
.icon, .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;
}

14.横线部分是每次都要加的，红框部分根据你的需要做改动就可以了，我在这个示例里只添加了一个图标，所以三个li的红框部分都一样。

15.成品图