Question

我试图在我的网页中加入 font-awesome 图标，一切正常，直到我改为我选择的字体， Exo 2 ，图标显示为有边框的正方形。它适用于其他字体，但由于某种原因，它不会起作用。

我添加了 font-awesome 样式表和google字体样式表。

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

Answer 1

fontawesome是字体图标，Exo 2是字体而不是＆＃34;字体图标＆＃34;

工作fontawesome你必须申请

font-family: FontAwesome;

如果你把它改成别的东西，我认为＆＃34; Exo 2＆＃34;

font-family: Exo 2;

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

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将不会按预期呈现。

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

更改字体

2 个答案: