Element UI 使用自定义图标（字体类型图标）

最近在使用 VUE+Electron+ElementUI 做 pc 端应用。遇到一个小问题，在此记录一下。

Element 控件

Element UI 提供了如此优秀的控件库，但是我们得根据自己项目的需求进行图标替换。这时候问题来了，我们看下 Element 的代码吧。

<template slot="title">
     <i class="el-icon-location"></i>
     <span>导航一</span>
 </template>

清楚的看到“el-icon-location”就是这个图标的控制入口，初次接触用 class 来控制图标的方式，不免觉得困惑。这时候我们可以更换 class 来实现更换图标，但是这里仅仅支持 el 自带的 icon 库。http://element-cn.eleme.io/#/zh-CN/component/icon 这个链接可以看到 el 自带的所有图标库，还是蛮强大的，如果能在里面找到合适的图标，那你非常幸运，直接写上相应的类名就可以啦。

接下来我会图文并茂的表达如何生成、引入、使用自定义的图标库。

---

第一步：找 UI 拿到 svg 图标。如下图一样的文件。

资源

第二步：上阿里妈妈网站 http://www.iconfont.cn ，注册并创建自己的项目。

第三步：上传 svg 图标到我的项目中。下载项目文件：

你会得到如下文件，把红框内文件拖入 vue 项目中。

第四部：引入自定义的资源，我的项目是在 index.ejs 中引入的。

css 引入

5.在 iconfont 文件中查看可以使用的样式名：

自定义的 class 名称

6.在Element UI 里面使用对应的 class：

代码应用方式（别忘记了 iconfont ）

7.效果展示

实现效果

哈哈哈哈，这个流程里面，虽然还有些地方我也不是很理解，但是终于把目的达到了。欢迎有疑惑的小伙伴，或者更有经验的小伙伴留言交流。

如果对你有帮助，记得帮忙点个赞哟。😀