ElementUI引入自定义图标

目录

步骤说明

新建项目

添加图标

项目设置

文件引入

使用技巧

---

步骤说明

新建项目

在iconfont网站的”资源管理->我的项目“页面里新建项目,注意”FontClass/Symbol前缀“选项填写el-icon-，"Font Family选项"填写element-icons。

添加图标

搜索要用到的图标点击加入购物车【选择的图标名称是中文名也没关系】，图标添加完后，在购物车面板里选择“添加进项目”。

项目设置

在”资源管理->我的项目“页面里点击”项目设置“，在弹出面板里勾选要用到的”字体格式“，如果不确定要用到哪些字体格式那么可以点击”WOFF2，WOFF，TTF，EOT，SVG“五种格式以提高图标正常显示的浏览器兼容性。保存设置后，可以将鼠标移动到图标上，在弹窗里点击像铅笔的图标开始修改图标基色，以使整体颜色看起来明暗一致。然后点击“下载至本地”按钮将图标下载到本地后解压。

文件引入

将解压后的图标文件夹里的iconfont.css和iconfont.eot，iconfont.svg，iconfont.ttf，iconfont.woff，iconfont.woff2等iconfont.css里引用到的字体文件复制粘贴到Vue项目里的src/assets/font-icon/目录下，如果没有font-icon目录则新建该目录【也可以改用别的目录名】。

然后在\src\main.js中添加引入iconfont.css，引入路径根据自己Vue项目的实际情况调整。

示例代码：

/* 引入自定义图标文件 */
import '../src/assets/font-icon/iconfont.css';

注意：

        如果在在iconfont网站里新建项目时”FontClass/Symbol前缀“选项填写el-icon，而不是el-icon-，那么可能需要将/src/assets/font-icon/iconfont.css里的每个图标样式自己加上一个中横线“-”，才能正常显示出图标，否则会显示乱码符号。

示例代码：

.el-icon-dot:before {
  content: "\e63f";
}

然后就可以像引用ElementUI自带图标一样地引用自定义图标了。

示例代码：

使用技巧

使用自定义图标时，可以打开iconfont网站里”我的项目“页面，将页面里的“Unicode”选项切换到“Font class”选项，然后将鼠标移动到想要用的图标，在弹窗里选择“复制代码”选项就复制想要使用图标的样式名，然后粘贴到项目里用到图标的位置。这样可以避免自己在本地自定义图标里去查找确认要使用到的图标的字体样式名称，减少工作量。

在iconfont网站“我的项目”页面里可以编辑图标（修改图标占格大小、旋转图标等等）。