更改所有字体系列后，字体真棒图标显示为正方形答案

【问题标题】：After changing all font-family, font awesome icons show up as squares更改所有字体系列后，字体真棒图标显示为正方形
【发布时间】：2018-10-31 00:28:19
【问题描述】：

应用以下代码后，字体真棒图标显示为正方形。如果我将它应用于body 标签。它不会覆盖所有字体系列，所以我不得不将它应用到*。我该如何解决这个错误？

<style>
  * {
    font-family: "Open Sans", sans-serif !important;
  }
</style>

【问题讨论】：

【解决方案1】：

这是因为 font awesome 需要将 FontAwesome font-family 应用于图标元素，以便正确获取和呈现图标。

您的样式可能会覆盖此 FontAwesome 行为。

解决此问题的一种方法是确保 font awesome 的 .fas 类仍然正确地将所需的 FontAwesome 字体应用于 .fas 元素。您可以通过更新 CSS 来做到这一点：

<style>
  * {
    font-family: "Open Sans", sans-serif;
  }

  .fas { 
    font-family:FontAwesome; 
  }
</style>

或者，如果您的浏览器支持 :not CSS3 选择器：

<style>
  *:not(.fas) {
    font-family: "Open Sans", sans-serif;
  }
</style>

【讨论】：

【解决方案2】：

如果你使用的是 Font Awesome 5 你可以使用这个

.fab
{
    font-family: 'Font Awesome 5 Brands' !important;
}

.fas, .far, .fa
{
    font-family: 'Font Awesome 5 Free' !important;
}

【讨论】：