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>添加到每个锚标记的开头。然后，您需要将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会先应用几种样式。因此，如果将其添加到锚标记的内部，则使用:before将完全正常。

<强> DEMO HERE

FontAwesome图标不显示

1 个答案: