如何在element ui中使用第三方图标库

在简书的前端编写中，遇到了一些问题，因为要使用element ui中可以在输入框加图标的一个组件，但是element ui中自带的图标库图标很少，所以找了一下如何使用第三方图标库，下面记录一下踩过的坑。

第一步

在阿里巴巴的图标库 http://www.iconfont.cn/ 中找自己要用的图标，加入购物车

第二步：

添加至项目，没有项目的话自建一个，名称之类的随便

第三步：

点这个按钮

第四步：

点击更多操作进行编辑，注意前缀的设置，后面的命名不能和element里面的发生冲突

输入图标前缀为了不和element ui 的图标冲突 所以在 原有的el-icon后面加上自己的项目名称。然后设置 font family 点击保存

第五步：

点击下载到本地 会下载一个download.zip 解压后 打开文件夹大致如下图：

第六步：将代码文件拷到项目的目录下，并在main.js中引入图标文件

第七步：打开iconfont.css添加 代码

其中2个class 处 和 font-family 的设置是来自在 阿里矢量库项目设置的参数 请填写一致（注意：第二个class处前面有个空格）

第八步：

图标的用法和element里面的一样