字体真棒的CSS样式无法正常工作

Question

I added font-awesome icons to my navbar and styled it with css. All works well except on the link with the dropdown list - once clicked - it shows two icons instead of only one (see screenshot). One is properly placed and the other one appears below the word 'link' and above the dropdown menu.

Here is the html code:

<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>

and here the css code:

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

I would greatly appreciate it if someone could tell me how to get rid of the icon (=white cross) under the word dropdown.

Thanks in advance for your help.

Answer 1

The thing is that your CSS is applying to way more that you want it to. Your imbedded UL is also triggering your CSS rules. You probably have even more white crosses appearing but you can't see them because your background is white.You should apply a class to the links that you want to have your white cross and then apply the css rules only to that class.

Answer 2

I think that you are seeing extra + icons because your css selector is incorrect. In actual fact you are probably getting 5 extra + icons (1 for each <a> in the dropdown menu).

To solve this you need to target only the <a> 's under the navbars <ul> not the dropdowns <ul>

try this selector: ul > li > a:before

EDIT

I have forked and corrected your bootply below:

http://www.bootply.com/OSTDVMekNE

The issue was on line 52 of your css (in bootply)

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

should have been

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