Duplicated icon issue with Twitter Bootstrap and Font Awesome

Question

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:

Answer 1

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

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

worked like a charm :)

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

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

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

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

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

Answer 7

For me, the solutions above, all of which require changing the background of FA icons to none, did not work. I was using Fontawesome kit inserted by javascript.

The solution which worked for me, was to change implementation of Fontawesome through javascript insertion, to css stylesheet injection.

You can use the FontAwesome CDN or your own downloaded css:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">