在项目中使用fontawsome时无法更改font-family

Question

我有一个菜单，我想在菜单中插入fontawsome图标。我有以下代码

HTML

googleTranslate

CSS

<div>
    <a href="#" ><span class="fa fa-home">Home</span></a>
</div>

我希望菜单项显示为块，以便用户可以单击图标打开链接，为此，我必须在 div a { font-size:50px; display:block; color:white; font-weight:bold; text-decoration:none; background-color:green; font-family:'Segoe UI'; } 标记内插入图标。但在这样做后，我无法更改font-family。我可以改变大小和颜色，但不能改变家庭。我尝试了很多解决方案，但发生了一些事情。 反正有没有改变font-family？

JS Fiddle

Answer 1

你不需要用你的font-awesome html元素包装任何文本，所以你应该拥有的是：

<div>
    <a href="#" ><span class="fa fa-home"></span>Home</a>
</div>

Answer 2

那是因为在你的标记中，你将span中的主文本与fa fa-home类一起包含在内，因此字体真棒的CSS优先于你的div a字体选择。

<div>
    <span class="fa fa-home"></span><a href="#" >Home</a>
</div>


div {
 background-color:green;
 display:inline-block;
 color:#fff;
 font-size:50px;
}
div a {
  font-size:50px;
  display:inline-block;
  font-weight:bold;
  text-decoration:none;
  font-family:'arial';
  color:#fff;
}