elementUI引入第三方图标库iconfont的时候显示小方块的问题

最新推荐文章于 2023-09-25 09:09:34 发布

大大大颖er

最新推荐文章于 2023-09-25 09:09:34 发布

阅读量2.9k

点赞数 1

分类专栏： iconfont elementUI 文章标签： html vue.js

本文链接：https://blog.csdn.net/ddyy2695734664/article/details/108258440

版权

iconfont 同时被 2 个专栏收录

1 篇文章

订阅专栏

elementUI

1 篇文章

订阅专栏

本文分享了解决Iconfont图标库更新后图标显示为小方块的问题经验，通过调整CSS代码，去掉图标类名前缀，使图标正常显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

iconfont用的很多了，网上也有很多教程怎么用，可以自行百度，我是昨天更新了一下图标库以后把前缀名称整体换掉以后，发现所有的图标全部变成了小方块，然后就去百度，发现是类名前面少了iconfont这个类名，比如
这样就可以了，但是我发现以前用的就不用加这个类名，直接写个图标名称就可以了，后来发现是改了css的代码，直接放代码

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

css里原来默认是这样的，然后替换掉就行了，用下面的代码：

[class^="iconfont-web"], [class*=" iconfont-web"] {
  font-family:"iconfont" !important;
  -moz-osx-font-smoothing: grayscale;
  speak: none;
  font-style: normal;
  font-weight: 500;
  font-variant: normal;
  text-transform: none;
  font-size: 16px;
  line-height: 1;
  vertical-align: baseline;
  display: inline-block;
  -webkit-font-smoothing: antialiased;
}

iconfont-web是我给图标起的前缀，样式也是根据自己的情况定，然后所有的小方块就显示出来了，就不需要再在每个class里写iconfont这个类名了