css styling of font-awesome not working properly

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.

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.

score 0 · Answer 1 · answered Aug 12 '14 at 16:21

0

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.

answered Aug 12 '14 at 16:21

IronWilliamCash

539
5
19

thank you for your suggestion. I think I correctly implemented your ideas and modified my code as followed:
Link

Josefine

Aug 13 '14 at 08:04

Sam · Accepted Answer · 2014-08-13T18:28:44.420

0

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 {

edited Aug 13 '14 at 18:28

answered Aug 12 '14 at 16:22

Sam

895
1
8
26

Could you please create a example either on [Bootply](http://www.bootply.com/new) or [jsFiddle](http://jsfiddle.net/) – Sam Aug 13 '14 at 14:43
this is my first time using bootply so I hope I did it the right way: http://www.bootply.com/Jz8j6G0jpZ – Josefine Aug 13 '14 at 15:38

css styling of font-awesome not working properly

2 Answers2