向elementUI中添加自定义图标
in 前端 with 0 comment

向elementUI中添加自定义图标

in 前端 with 0 comment

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

挑选图标

首先打开iconfont,在搜索栏中搜索想要的图标

1.png

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

2.png

添加完想要的图标后,点击页面右上角的购物车图标会在页面右侧弹出一个浮层列出了所有被选中的图标,之后再点击浮层底部的添加至项目把图标入某个项目中。

3.png

4.png

也可以点击加入项目的右侧的文件夹图标创建一个新项目。

5.png

我这里先命名一个名为demo的项目,点击确定

6.png

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

7.png

这里只需要修改FontClass/Symbol 前缀这一项,把icon-改为el-icon-

8.png

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

9.png

10.png

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

11.png

放入项目

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

12.png

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

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

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

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

其他

.iconfont {
  font-family: "iconfont", serif !important;
  font-size: inherit;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/** 
 * 被选中时的el-icon-index图标,仔细看content内容是不一样的哦
 * 我们可以在找图标时找一个空心的和实心的,之后把另一个图标的content值复制进来即可
 * 这样就实现了选中状态时,显示另一个图标了
 */
.is-active .el-icon-index:before {
  content: "\e750";
}

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

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;
}
Comments are closed.