FontAwesome图标无法显示

Question

FontAwesome图标无法显示

3

我正在创建一个简单的侧边栏导航，很快会变成一个管理区域。我试图使用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";
}

- Sabolis

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Fizzix · Accepted Answer

你需要稍微重构你的HTML，将<i class="fa"></i>添加到每个锚点标签的开头。然后你需要在这个新的i元素中添加FontAwesome声明。 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会对第一个应用一些样式。所以如果将其添加到锚标记内部，使用:before就可以完美地工作了。 DEMO HERE 的演示。