写在前面
其实图标在ant-design-vue中其实已经有很多可选的，可有些情况，产品/UI可能还是会要求使用特定的图标。这可能需要上传svg到iconfont.cn阿里图标库中，本文不讲述如何上传svg到iconfont。而是介绍如何使用iconfont中的图标，昨天花了两个小时没找到关于vue如何自定义图标的文章， 大多数都是关于react自定义图标。 所以花了点时间研究下， 在这里做个总结， 供大家参考。
step1. init
新建项目test001-编辑项目
image.png
image.png
step2 .编辑css
点击font class 复制这个路径到浏览器中，然后copy一下css代码
image.png
copy代码到本地文件中
image.png
然后考到Index.html文件中（当然你也可以提出来然后用Link 标签引入css）
重点来了， 一定要按照红框的代码写！！！ 必须是anticon, 注意是anticon 不是action
除了拷贝的代码， 还要再加一个， 一定要写！！！
.anticon::before{
display: block !important;
}
image.png
step3 .在router.config.js中配置一下
这个icon的名字跟你iconfong项目的名称保持统一
image.png
image.png
看一下效果，为啥没颜色我也不知道。但是是可以引入了，颜色话自己再研究研究
image.png
网友评论