0

我正在尝试将 font-awesome 集成到一个 web 项目中，但是在我的 css 中识别出的一小段代码使 font-awesome 图标显示为白色方块。当我删除 CSS 代码的一点点和平时，它可以工作，但由于当前的网站布局，我无法删除它。有没有办法让图标正确显示？

这是阻止布局所需图标的代码：

*,*:before,*:after{
    box-sizing: border-box;
    position: relative;
    font-family : Arial;
    font-size   : 12px;
    font-weight : normal;
}

在我的自定义 css 代码之前或之后是否包含 font-awesome css 并不重要。问题依然...

4

3 回答 3

0

问题出在*:before所以你必须在你的css中改变它。看看这个https://jsfiddle.net/ss95sfLz/

CSS

*,*:after{
  box-sizing: border-box;
  position: relative;
  font-family : Arial;
  font-size   : 12px;
  font-weight : normal;
}

这是问题，因为字体真棒图标使用:before，这是代码

.fa-balance-scale::before {
   content: "";
}
于 2015-11-06T15:39:49.047 回答
0

您正在覆盖和伪选择器中的所有 (*)字体；由 font-awesome 和许多其他库使用。您应该尝试仅针对需要由该代码片段更改的内容或。:before:after.class#id

于 2015-11-06T15:40:28.950 回答
0

您的字体系列正在被 Arial 覆盖。从此选择器中删除与字体相关的部分并将其添加到body选择器中。

*,*:before,*:after{
    box-sizing: border-box;
    position: relative;
}

body {
    font-family : Arial;
    font-size   : 12px;
    font-weight : normal;
}
于 2015-11-06T15:43:14.053 回答