CODEWITHSUNDEEP
iconstwitter-bootstrapduplicatesfont-awesome
Vinicius Tavares
Vinicius Tavares

Reputation: 653

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:

Duplicated Icon

Upvotes: 10

Views: 9525

Answers (7)

Joel G Mathew
Joel G Mathew

Reputation: 8061

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

Upvotes: 0

Jeffrey Nicholson Carr&#233;
Jeffrey Nicholson Carr&#233;

Reputation: 3040

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.

Upvotes: 0

Bryan
Bryan

Reputation: 17581

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

Upvotes: 3

Sourabh
Sourabh

Reputation: 615

Had to add this to my CSS

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

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

Upvotes: 5

Rodrigo
Rodrigo

Reputation: 221

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

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

worked like a charm :)

Upvotes: 22

Keeper Hood
Keeper Hood

Reputation: 594

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.

Upvotes: 4

Vinicius Tavares
Vinicius Tavares

Reputation: 653

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.

Upvotes: 4

Related Questions