css样式的字体 - 真棒不能正常工作

Question

我在导航栏中添加了字体很棒的图标并用css设置了样式。一切正常，除了链接下拉列表 - 一旦点击 - 它显示两个图标而不是只有一个（见截图）。一个放置正确，另一个放在“链接”一词下方和下拉菜单上方。

这是html代码：

<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
  <ul class="nav navbar-nav navbar-right">
    <li class="active"><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li class="dropdown">
      <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
        <li class="divider"></li>
        <li><a href="#">One more separated link</a></li>
      </ul>
    </li>
  </ul>

这里是css代码：

ul li a:before {
    font-family: "FontAwesome";
    content: "\f067";
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    text-align: center;
    color: #FFF;
    width: 100%;
    height: 100%;
    margin-top: -26px;  
}

如果有人能告诉我如何摆脱单词下拉列表下的图标（=白色十字），我将不胜感激。

提前感谢您的帮助。

Answer 1

问题是你的CSS正在申请更多你想要的东西。您嵌入的UL也会触发您的CSS规则。您可能会出现更多的白色十字架，但由于您的背景是白色的，您无法看到它们。您应该将类​​应用于您想要白色十字架的链接，然后仅将css规则应用于该类。

Answer 2

我认为您看到了额外的+图标，因为您的css选择器不正确。事实上，您可能会在下拉菜单中获得5个额外+图标（每个<a> 1个）。

要解决此问题，您只需要定位导航栏<a>下的<ul>而不是下拉列表<ul>

尝试此选择器：ul > li > a:before

修改

我已经分叉并纠正了你的bootply：

http://www.bootply.com/OSTDVMekNE

问题出在您的CSS第52行（在bootply中）

.cross a:before, .cross:hover > a:before { 

应该是

.cross > a:before, .cross:hover > a:before {