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

青旅半醒 2021-09-18 16:56 1113阅读 0赞

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

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

俗话说 1+1>2 。

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2][]

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

改完效果：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 3][]

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

所以介绍一种新的写法。

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

![20190403100354361.png][]

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，不然还是会出现小方块。**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 4][]

![20190709102031422.png][]

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

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

个人微信公众号：

![20200824115704183.png][]

[Link 1]: https://www.iconfont.cn/home/index
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70]: /images/20210812/8ad1e93db57a429f9eba148f5d0c1414.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 1]: /images/20210812/3c6d13370795487882f9622fb9d6a6bc.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 2]: /images/20210812/4b360d80852d40dd801ae56dbae4c03e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 3]: /images/20210812/a971051dfbe748b780ebb972af22ee56.png
[20190403100354361.png]: /images/20210812/62d1a85a135b4d0d979032c737a788d4.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQzMzYzODg0_size_16_color_FFFFFF_t_70 4]: /images/20210812/111d19f8113a4ed986495c1a3843e3cf.png
[20190709102031422.png]: /images/20210812/1fa2eb055920441ca033c575cf9c673f.png
[20200824115704183.png]: /images/20210812/403b3d60d1f34eeb9c4d72c267679fa2.png