Search code examples
cssfont-awesome-4

css styling of font-awesome not working properly

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.

enter image description here

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.

Solution

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