ElementUI添加自定义图标

2021/10/08
- 编程
0阅读

elementUI中虽然内置了大量图标，但有时候总会遇到在elementUI中找不到想要的图标。这次我来分享一个添加自定义图标的方法。

挑选图标

1、首先打开iconfont，在搜索栏中搜索想要的图标

2、之后按Enter搜索，鼠标移动到图标上会显示一个操作遮罩，点击购物车图标把图标添加到库里。

3、添加完想要的图标后，点击页面右上角的购物车图标会在页面右侧弹出一个浮层列出了所有被选中的图标

4、之后再点击浮层底部的添加至项目把图标入某个项目中（也可以点击加入项目的右侧的文件夹图标创建一个新项目）。

5、我这里先命名一个名为demo的项目，点击确定。

6、之后页面会自动跳转到创建的项目内，点击右侧的项目设置。

7、这里只需要修改FontClass/Symbol 前缀这一项，把icon-改为el-icon-。

如果要修改某个图标的名称，比如想用el-icon-index来命名某个图标，就把鼠标移动到图标上，点击铅笔图标，在弹出的弹窗里修改Font Class / Symbol这一项为index，在之后iconfont会自动把el-icon-的前缀和index拼接在一起的。

当所有的图标都处理完成后，点击下载至本地按钮下载图标项目。

放入项目

首先把下载的压缩包解压后放到开发目录中，我这里放在了src\assets\fonts下

然后在main.js中引入iconfont.css

1	import './assets/fonts/iconfont.css'

之后就能在其他地方使用这些图标啦，例如：

1	<i class="iconfont el-icon-index"></i>

其他

如果遇到使用图标时尺寸显示有问题，可以在iconfont.css修改.iconfont样式

.iconfont {
    font-family: "iconfont", serif !important;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

使用el-menu组件时，如何修改组件选择状态的icon？

经过查看F12控制台发现，el-menu当前选中项会被加上一个.is-active样式，那我们可以利用这个样式来实现选中状态的图标切换

/** 
 * 被选中时的el-icon-index图标，仔细看content内容是不一样的哦
 * 我们可以在找图标时找一个空心的和实心的，之后把另一个图标的content值复制进来即可
 * 这样就实现了选中状态时，显示另一个图标了
 */
.is-active .el-icon-index:before {
    content: "\e750";
}

.el-icon-index:before {
    content: "\e751";
}

引用的iconfont时和element本身的图表冲突，导致图标不显示

elementUI icon的font-family名称可以在node_modules/element-ui/lib/theme-chalk/icon.css中找到。之后在css中重写样式即可（这样既能显示出来两种图表，又能保证在图标重名时，以elementUI为准），代码如下：

[class^="el-icon-"], [class*=" el-icon-"] {
    font-family: "element-icons", "iconfont" !important;
    font-size: inherit;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}