赵走x博客 - 开发者的网上家园

8、Vue中采用ElementUI后使用IconFont图标

资源编号:76637 前端相关问题前端热度：116

来源：https://www.jianshu.com/p/22558a1b7b97

# 0x01. 选择图标
我们进入iconfont.cn中搜索我们需要的图标，然后鼠标悬浮在这个图标上，等待弹出菜单后选择第一个购物车图标，将我们要的图标添加到购物车

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/95e648cc-9bdc-11ea-9898-0242ac120005.png)
反复这个操作，我们把我们想要的图标都加到购物车中等待下一步操作

# 0x02. 操作购物车
首先，我们点击右上角的购物车图标

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/9ac8499e-9bdc-11ea-81d0-0242ac120005.png)
在弹出的购物车界面中，查看购物车中的所有图标

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/9e338e22-9bdc-11ea-b5d2-0242ac120005.png)
确认这些就是我们需要的图标后点击下面的添加至项目，在弹出的菜单中，选择要添加到的项目名称选项

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/a0daa8a4-9bdc-11ea-88de-0242ac120005.png)

# 0x03. 操作项目
添加到项目后，我们进入项目管理页面，通过上方图标管理 -> 我的项目进入：

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/a6557c78-9bdc-11ea-b774-0242ac120005.png)

进入项目之后，我们可以看到下方项目中的所有图标，我们首先选择菜单：更多操作 -> 编辑项目，

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/b91eac1c-9bdc-11ea-98e5-0242ac120005.png)
弹出的项目编辑页面中，我们设置Symbol前缀为：el-icon，然后将FontFamily设置为element-icons，之后点击保存按钮
![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/bd80f99a-9bdc-11ea-8e95-0242ac120005.png)
回到项目页面后，我们依次编辑图标的信息，主要是讲图标的引用class修改成我们想要的，把鼠标悬浮到图标上，在悬浮菜单上点击小铅笔图标，编辑图标信息：

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/c163a2ce-9bdc-11ea-b8a5-0242ac120005.png)
修改FontClass字段，里面的名称稍后我们引用这个图标的时候会用到，这部分请您根据项目自行命名修改，我这里把这个图标命名为executor，然后点击【仅保存】按钮：

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/c4cba4a2-9bdc-11ea-95dd-0242ac120005.png)
接下来，回到项目页面之后点击下载到本地的按钮，会自动下载一个zip格式的压缩包

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/c7dd15b8-9bdc-11ea-b6f7-0242ac120005.png)
# 0x04. 图标的使用
下载完毕后，我们将压缩包解压，得到以下文件，我们将下面除了demo.*之外的文件选择后复制到项目中：

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/cd10e9e2-9bdc-11ea-aa7f-0242ac120005.png)
复制到项目中后，大家看一下这是我的工程结构，我把他们放到了assets下面的iconfont文件夹，你们可以根据你们的工程结构放到指定地方：

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/d0023020-9bdc-11ea-8bfd-0242ac120005.png)
接下来，我们全局引用这个字体图标css样式，在main.js中添加如下import：
```javascript
import '@/assets/iconfont/iconfont.css'
```
@符号表示当前工程的src目录，打包工具会自动去src下去找文件

最后，我们在我们需要引入图标的地方直接使用即可，class命名规则为：el-icon- + 你给图标命名的Font Class，比如我们刚刚命名的executor，在这里就是这么引用：
```
<i class="element-icons el-icon-executor"></i>
```
记住，element-icons别忘记加上
最后看看项目中引用后的效果：

![image.png](https://www.handsomemark.com/api/v1.0/file/one/2020/05/22/ef674e14-9bdc-11ea-ac2d-0242ac120005.png)