写在前面

其实图标在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