对于前端来说，在项目中使用图标是非常常见的，当前项目技术栈是vue全家桶搭配element-ui，由于element-ui提供的icon不能完全满足项目的需要，所以决定使用阿里提供的iconfont图标库。
一、准备好需要使用的icon
登录阿里云矢量图标库，可以自己新建项目，选择符合的图标加入到项目中，或者由UI小姐姐将icon上传到iconfont图标库。下面是公司UI人员将所有的图标上传到iconfont图标库。
二、使用iconfont
可以使用线上地址也可以下载在本地使用，本人推荐本地使用，因为这样就算不联网图标也不会消失。另外，unicode、Font class、symbol三种方式推荐使用Font class。需要先将字体库下载并放到项目中，我们只需要使用class就可以调用图标了，其原理就是利用before伪元素来显示图标。
1. 下载完之后得到一个压缩包，打开这个压缩包，除了demo以外其他的文件都是有用的。
2. 在项目的src=>assets文件夹下新建一个iconfont文件夹，将有用的字体文件放到该目录下。
3. 在项目的main.js文件，导入iconfont.css。
4. 在iconfont.css文件记录了我们所有的字体，直接使用class就可以了，即红框所框选的部分。
<el-button type="primary" class="btn"> <i class="iconfont icon-mobanguanli"></i>主页装饰<el-button>
6. 渲染出来的效果如图所示：
这样icon就生成了，需要调整大小或者颜色只需对应的修改它的font-size或者color就可以了。
另外也可以在左侧导航菜单使用该图标
1. 在router的index.js配置如下。
2. 渲染出来的效果如图所示：
至此，在vue项目中使用第三方字体库的步骤已完毕，如果后期随着项目的迭代还有其他图标，那就继续往里面添加图标到项目，然后下载文件替换之前的文件，之后找到对应的class名称使用即可。
