字体很棒图标在更改字体时消失

Question

我正在尝试将 font-awesome 图标合并到我的网页中，一切正常，直到我更改为我选择的字体 Exo 2，并且图标显示为带边框的正方形。它与其他字体一起工作得很好，但由于某种原因，这不起作用。

我已经包含了 font-awesome 样式表和谷歌字体样式表。

如果有人能指出我做错了什么，我将不胜感激！

Answer 1

font-awesome 的此问题可能是由于为图标设置了其他字体所致。请看这个小提琴

.parent1,
.parent1 > i{
  font-family: 'Open Sans', sans-serif;
}

.parent2{
  font-family: 'Open Sans', sans-serif;
}

<script src="https://use.fontawesome.com/a30dc5ca39.js"></script>
<div class="parent1">
  <i class="fa fa-times"></i>This won't work
</div>
<div class="parent2">
  <i class="fa fa-times"></i>This works
</div>

如果您将字体设置为子元素，即

<i>

元素，则 font-awesome 将不会按照您的预期呈现。

在第二个示例中，我只为父级设置了不同的字体，但没有为图标设置，并且它按预期工作

Answer 2

fontawesome 是字体图标，Exo 2 是字体而不是“字体图标”

要工作得很棒，你必须申请

font-family: FontAwesome;

如果你把它改成其他的东西我认为是“Exo 2”

font-family: Exo 2;

它不会工作并且会显示你的方块

Answer 3

我遇到了同样的问题，这就是解决方法。

之前

*, *::after, *::before{

   margin: 0;
   padding: 0;
   font-family: 'Your Custom Font', sans-serif;
}

之后

*{
    font-family: 'Your Custom Font', sans-serif;
}

*, *::after, *::before{

   margin: 0;
   padding: 0;
}