Vue中采用ElementUI后使用IconFont图标

2018-07-12 本文已影响87人柠檬信息技术有限公司

ElementUI中自带的图标实在实在是太少了，所以我们可以借助iconfont为其扩展

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

添加图标到购物车.png

反复这个操作，我们把我们想要的图标都加到购物车中等待下一步操作

首先，我们点击右上角的购物车图标

进入购物车.png

在弹出的购物车界面中，查看购物车中的所有图标

购物车界面.png

确认这些就是我们需要的图标后点击下面的添加至项目，在弹出的菜单中，选择要添加到的项目名称选项

选择项目.png

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

进入我的项目.png

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

编辑项目菜单.png

弹出的项目编辑页面中，我们设置Symbol前缀为：el-icon，然后将FontFamily设置为element-icons，之后点击保存按钮

编辑项目页面.png

回到项目页面后，我们依次编辑图标的信息，主要是讲图标的引用class修改成我们想要的，把鼠标悬浮到图标上，在悬浮菜单上点击小铅笔图标，编辑图标信息：

准备编辑图标信息.png

修改FontClass字段，里面的名称稍后我们引用这个图标的时候会用到，这部分请您根据项目自行命名修改，我这里把这个图标命名为executor，然后点击【仅保存】按钮：

编辑图标class.png

接下来，回到项目页面之后点击下载到本地的按钮，会自动下载一个zip格式的压缩包

下载按钮.png

下载完毕后，我们将压缩包解压，得到以下文件，我们将下面除了demo.*之外的文件选择后复制到项目中：

解压后的文件夹.png

复制到项目中后，大家看一下这是我的工程结构，我把他们放到了assets下面的iconfont文件夹，你们可以根据你们的工程结构放到指定地方：

我的工程结构.png

接下来，我们全局引用这个字体图标css样式，在main.js中添加如下import：

import '@/assets/iconfont/iconfont.css'

@符号表示当前工程的src目录，打包工具会自动去src下去找文件

最后，我们在我们需要引入图标的地方直接使用即可，class命名规则为：el-icon- + 你给图标命名的Font Class，比如我们刚刚命名的executor，在这里就是这么引用：

<i class="el-icon-executor"></i>

最后看看项目中引用后的效果：

最后效果.png