在Element-UI中引入Iconfont图标

最近在使用在Element-UI的时候发现其图标太少了,连常用的reset,people之类的图标都没有,于是想引入第三方的图标库进行使用。在网上查找了资料后成功引入,下面就是我的引入流程:

这里我选择的是阿里巴巴的Iconfont,打开https://www.iconfont.cn/,创建账号,然后选择你要引入的图标(加入购物车)

点击添加至项目,然后新建一个项目

点击跟多操作修改项目前缀,不能为 el-icon- ,因为这个可能会和Element-UI自带的图标重合

点击生成在线CSS代码,

复制代码链接,在项目的APP.vue中引入,这时我们就可以通过 class="iconfont el-icon-mo-xxx" 的方式在项目中使用引入的第三方图标了,如果想要去掉 iconfont 这个类直接用 el-icon-mo-xxx 来使用图标的话我们还需要多一步操作:





PS

每次新增或删除,特别是新增如果要引入新增的图标,要重新生成CSS文件,这时候需要把新生成的CSS文件链接重新在 App.vue 中引入,替换掉原来的链接。

你可能感兴趣的:(iconfont,element-ui,vue.js)