html - FontAwesome 图标不显示

Question

我正在创建一个简单的侧边栏导航，它很快就会变成一个管理区域。我正在尝试使用 css 类来显示我的图标。这是代码。你能发现问题吗？

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="assets/css/navigation.css">

  <li title="home"><a href="#" class="menu-button home">menu</a></li>

  <li title="search"><a href="#" class="search">search</a></li>
  <li title="pencil"><a href="#" class="pencil">pencil</a></li>
  <li title="about"><a href="#" class="active about">about</a></li>
  <li title="archive"><a href="#" class="archive">archive</a></li>
  <li title="contact"><a href="#" class="contact">contact</a></li>
</ul>

<ul class="menu-bar">
    <li><a href="#" class="menu-button">Menu</a></li>
    <li><a href="#">Home</a></li>
    <li><a href="#">Profile</a></li>
    <li><a href="#">Editorial</a></li>
    <li><a href="#">About</a></li>
</ul>

我的 HTML 到此结束，现在这是我的 CSS。

@import url('//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css');
.menu li a:before {
font-family: FontAwesome;
speak: none;
text-indent: 0em;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
font-size: 1.4em;
}
.menu li a.search:before {
content: "\f002";
}
.menu li a.archive:before {
content: "\f187";
}
.menu li a.pencil:before {
content: "\f040";
}
.menu li a.contact:before {
content: "\f003";
}
.menu li a.about:before {
content: "\f007";
}
.menu li a.home:before {
content: "\f039";
}

Answer 1

您需要稍微调整您的 HTML 以添加 <i class="fa"></i>到每个 anchor 标记的开头。然后您需要将 FontAwesome 声明添加到这个新的 i元素。

HTML:

<li title="search">
     <a href="#" class="search">
          <i class="fa"></i> 
          search
     </a>
</li>

CSS:

li a i:before {
  font-family: FontAwesome;
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-decoration: inherit;
}

li a.search i:before {
    content:"\f002";
}

发生这种情况是因为 i元素必须首先存在于 fa 类中因为 FontAwesome 首先应用了一些样式。因此，如果将其添加到 anchor 标记的内部，请使用 :before将工作得很好。

DEMO HERE