在项目中使用 fontawesome 时无法更改字体系列

Question

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

HTML

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

CSS

 div a {
  font-size:50px;
  display:block;
  color:white;
  font-weight:bold;
  text-decoration:none;
  background-color:green;
  font-family:'Segoe UI';
}

我希望菜单项显示为块，以便用户可以单击图标打开 link，为此我必须在 <a> 标记内插入图标。但是这样做之后我无法更改字体系列。我可以改变尺寸和颜色，但不能改变家庭。我尝试了很多解决方案，但没有发生任何事情。无论如何要改变字体系列？

JS Fiddle

Answer 1

您不需要使用超棒的 html 元素包裹任何文本，因此您应该拥有的是：

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

Answer 2

那是因为在你的标记中，你用 fa fa-home 类将主页文本括在 span 内，所以字体很棒的 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;
}

在项目中使用 fontawesome 时无法更改字体系列

Unable to change font-family while using fontawsome in project

html

css

font-awesome