美文网首页
element ui中使用第三方字体小图标(亲测有效)

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

作者: 坏丶毛病 | 来源:发表于2020-09-02 09:53 被阅读0次

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

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

俗话说 1+1>2 。

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

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

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

image

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

image

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

image

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

改完效果:

image

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

所以介绍一种新的写法。

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

image

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

image image

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

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

个人微信公众号:

image

相关文章

网友评论

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

      本文链接:https://www.haomeiwen.com/subject/aquisktx.html