在简书的前端编写中，遇到了一些问题，因为要使用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里面的一样
网友评论