html - 在元素中使用很棒的字体时无法更改字体系列

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';
}

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

JS Fiddle

Answer 1

你不需要用超棒的 html 元素包裹任何文本，所以你应该拥有的是:

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