Font-awesome 图标在更改字体时消失

Question

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

我包含了 font-awesome 样式表和 google 字体样式表。

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

Answer 1

fontawesome 是字体图标，Exo 2 是字体而不是 "font icons"

要工作 fontawesome 你必须申请

font-family: FontAwesome;

如果你在这里把它改成别的东西，我想 "Exo 2"

font-family: Exo 2;

它不会工作，会显示 u 方块

Answer 2

font-awesome 的这个问题可能是由于为图标设置了其他字体。请看这个fiddle

.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 将不会像您期望的那样呈现。

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

Font-awesome 图标在更改字体时消失

Font-awesome Icon disappearing on change of font

html

fonts

google-font-api

font-awesome