Duplicated icon issue with Twitter Bootstrap and Font Awesome

问题

I am having an issue with this menu with icons using bootstrap and font awesome, both in less format and being compiled at runtime with JavaScript.

Both black and blue ones are showing up at the same time!

The code:

<div class="well sidebar-nav">
    <ul class="nav nav-list">
        <li class="nav-header">Relatórios</li>
          <li><a href="#"><i class="icon-facebook-sign"></i> Acessos na s-Commerce</a></li>
          <li><a href="#"><i class="icon-shopping-cart"></i> Acessos para a loja</a></li>
    </ul>
</div>

Browser output:

回答1:

with the new version of bootstrap what i did on CSS was this:

  [class^="icon-"], [class*=" icon-"]{
    background:none;
  }

worked like a charm :)

回答2:

Had to add this to my CSS

[class^="icon-"], [class*=" icon-"]{
    background:none!important;
}

.btn [class^="icon-"], .btn [class*=" icon-"] {
    line-height: 1.3em;
}

回答3:

When I was writing this question, came to my mind to remove the sprites.less from the bootstrap includes. Fixed and worked like a charm.

回答4:

Hey I've ran into the same problem this day, but I seemed to solve it by adding a stylesheet fix beneath the font-awesome.css and the bootstrap.css since I cannot use LESS in my situation.

<style type="text/css"> .icon {background:none;} </style>

Hope it helps someone.

回答5:

If you are using the IE 6 or 7 JS fix file lte-ie7.js without specifying if < IE 8, you'll get the double icons too.

<!--[if lt IE 8]>
<script src="lte-ie7.js"></script>
<![endif]-->

回答6:

Make sure you are using the Twitter Bootstrap css without the icon part.

In this case the font is overlaying the image.

they provide a version specially for this case

As you can see there are 3 main version of the CSS :

complete : main + responsive + icon
without icon : main + responsive
without responsive behavior : main + icon

link

//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.no-icons.min.css

Note clear your browser cash for any of the solution posted on other forums or in this one. Removing the sprite or adding a correction will fix the issue but, it's better to remove all the css concerning the icon.

来源：https://stackoverflow.com/questions/11452356/duplicated-icon-issue-with-twitter-bootstrap-and-font-awesome

标签

icons

twitter-bootstrap

duplicates

font-awesome