【ant design vue】中使用iconfont,自定义左侧导航栏图标

在iconfont的目标项目里点击以下代码会得到css文件
在这里插入图片描述
在public文件里新建font目录,存放字体的css文件,新建menu.css,将之前得到的css代码复制进去,在index.html里引入
在这里插入图片描述
在menu.css里作出以下修改
在这里插入图片描述
最后加上:
在这里插入图片描述
如以下代码:

@font-face {
  font-family: "iconfont"; /* Project id 3202007 */
  src: url('//at.alicdn.com/t/font_3202007_xc0hm82ut97.woff2?t=1645683513673') format('woff2'),
       url('//at.alicdn.com/t/font_3202007_xc0hm82ut97.woff?t=1645683513673') format('woff'),
       url('//at.alicdn.com/t/font_3202007_xc0hm82ut97.ttf?t=1645683513673') format('truetype'),
       url('//at.alicdn.com/t/font_3202007_xc0hm82ut97.svg?t=1645683513673#anticon') format('svg');
}
.anticon-isv-install:before {
  content: "\e63e";
}
.anticon::before{
  display: block !important;
}

然后就可以在菜单里使用了

在这里插入图片描述


版权声明:本文为weixin_44617133原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。