我就不过多介绍elementui了。 是一个基于vue的ui组件库。 相信使用vue开发的人都离不开它们。
这样，在日常使用中，我们也可能会发现elementui中外部的小图标非常少。 这时候我们就需要将它们与第三方小图标库一起使用。
俗话说，1+1>2。
那么以阿里字体小图标为例，看看如何配合elementui使用。
1.进入阿里小图标官网，选择我们喜欢和需要的小图标
2.购物车添加小图标，添加到商品中
3.进入对应的项目，然后点击更多操作，然后编辑项目
4、然后将FontClass/Symbol前缀改为elementui的格式，即el-
然后点击保存，只要注意名字，不要和elementui的外部小图标冲突即可。
改变后疗效：
之前按照elementui官网图标库的类设置的，以为可以正常使用elementui图标写法，但是会出现一个小黑框，不知道是不是我写的有问题。
因此引入一种新的写作方式。
5、剩下的就是正常下载到本地，然后把对应的文件放到font里elementui图标写法，然后把iconfont.css放到css文件夹里，改一下路径就可以了。
6.在main.js中引入小字体图标的css文件
// 引入公共样式
import iconFont from "./assets/css/iconfont.css"7、elementui组件中正常使用：
只要把这里的图标名称改成你想要的小图标就可以了。
注意：后面一定要加上iconfont，不然还是会出现这个框。
发表评论