elementuiicon-自定义elementui中的图标

在 Vue 中引入 ElementUI 是非常常见的

elementUI-icon 图标

ElementUI 默认提供了一个 icon 图标集合,可以使用 i 标签展示

直接 class 名写图标名就能展示,这可太方便了

但是图标肯定是不够用的,总会要引入一些自己的图标,比如使用阿里的 iconfont

在阿里 帮助页面 我们可以看到好几种引入方式

其中 font-class 方式引入

可以看到,需要先写个 fontclass

然后每次引用都需要写 fontclass icon 名称

虽然不是什么繁琐的事,但写多了还是很烦的...

那怎么才能做到和 element-icon 一样,只需要写 icon 名呢

图中揭晓了秘密,css 选择器

通过 css 选择器,使得只要 el-icon-开头/包含 el-icon-的 class 名,都会作用这块 css

可以看到,项目-更多操作-编辑-前缀

这里支持写前缀,例如 wx-icon-

当然

你要是有 less 或者 scss 之类预编译框架也可以去 里面配全局引入

反正引入就行了

这下舒服了

elementui图标库图标较少

当你想用elementui的控件而不想用它的图标时,就可以使用自定义的方式来实现

el-icon-my-export为我自定义的图标命名

content里面使用汉字大小会比较正常,但是汉字有时候会出现乱码,可以使用Unicode编码

其他控件的图标替换大多如此,当然具体问题具体分析,我也不确定会不会有不同的情况

一般是由于浏览器对字体文件的限制导致,可以在CSS中添加以下代码:

```

@font-face {

font-family: element-icons;

src: url('../fonts/') format('truetype');

/* iOS 4.1- */

}

```

然后在全局中给图标的样式添加上字体即可:

```

.el-icon {

font-family: element-icons;

}

```