还没仔细研究antd vue的代码,所以动态菜单图标的显示机制还没弄明白,时间仓促,临时找到一个解决办法。

1、选好所需图标

iconfont网站上选好要用的图标,放到一个项目中,在项目设置中,把图标前缀改成anticon,更新代码后,选择下载到本地或者复制在线地址。

2、在public/index.html文件中引用图标

如果下载到本地,就把资源复制到public/static/下,然后在index.html中引入,或者直接引入复制的在线网址。

3、在菜单中使用图标

在系统设置-菜单管理中,在图标一栏填入图标的名字,注意不要带前缀。图标的名字可以在iconfont网站上,鼠标放到项目中的图标上,直接点击复制
当然,也可以在页面的任意位置用任意标签使用图标:

<span class="anticon anticon-tubiao"></span>

4、在任意全局的地方(比如index.html中)加入下面的css代码:

<style>
  .anticon:before {
    display: block !important;
  }
</style>

为什么要在iconfont的项目设置中修改图标前缀呢?因为antd vue图标的class就是anticon
重置.anticon:before的样式,目前也没有发现任何副作用。

有更好的方法欢迎留言告诉我。

END

标签: Ant Design Vue, Ant Design Vue Pro, iconfont