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.