[Antd Vue Pro]在动态菜单中使用iconfont图标
还没仔细研究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