element ui中使用第三方字体小图标(亲测有效)

element ui我就不过多介绍了，它是基于vue的ui组件库，相信使用vue开发的人，难免离不开它们。

那么在日常使用中，我们也可能会发现element ui中的内置小图标非常少，这时就需要我们结合第三方的小图标库来一起使用了。

俗话说 1+1>2 。

那么就拿阿里字体小图标来举例，看看怎么结合element ui一起使用。

1、进入阿里小图标官网，挑选我们喜欢需要的小图标

2、添加小图标到购物车，并添加到项目

3、到所对应的项目，然后点击更多操作，然后编辑项目

4、然后修改FontClass/Symbol 前缀，更改为element ui的格式，即el-

然后点击保存，这里只要注意命名别和element ui内置的小图标冲突即可。

改完效果：

之前是按element ui的官网图标库的class来设置的，以为这样就能正常使用了，然而会出现白色的小方框，不知道是不是我写的有问题。

所以介绍一种新的写法。

5、剩下的就是正常的下载至本地，然后把对应的文件放在font里，然后把iconfont.css放在css文件夹里，修改路径即可。

 

6、main.js里引入字体小图标的css文件

// 引入公共样式
import iconFont from "./assets/css/iconfont.css"

7、正常在element ui的组件中使用：

<el-button type="primary" icon="iconfont icon-delete" @click=""></el-button>

这里的icon的名字换成自己想要的小图标的即可。

注：必须前面加上iconfont，不然还是会出现小方块。

好了，以上就是在element ui中使用第三方小图标库。

如有问题，请指出，接受批评。

个人微信公众号：