由于一段 CSS 代码，Font-Awesome 图标未加载答案

【问题标题】：Font-Awesome icons not loaded due to piece of CSS code由于一段 CSS 代码，Font-Awesome 图标未加载
【发布时间】：2015-11-06 15:32:14
【问题描述】：

我正在尝试将 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 并不重要。问题依旧……

【问题讨论】：

您的字体系列正在被 Arial 覆盖。从此选择器中移除与字体相关的部分，并将其添加到 body 选择器中。
请写成答案。它解决了我的问题:-)

标签： html css fonts fontawesome-4.4.0

【解决方案1】：

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

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

body {
    font-family : Arial;
    font-size   : 12px;
    font-weight : normal;
}

【讨论】：

【解决方案2】：

问题出在*: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: "";
}

【讨论】：

【解决方案3】：

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

【讨论】：