重复的图标问题与Twitter的引导和字体真棒(Duplicated icon issue with

我有使用引导程序和字体真棒图标，这个菜单的问题，无论是在较少的格式，并在运行时被编译的JavaScript。

黑色和蓝色的都出现了在同一时间！

代码：

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

浏览器输出：

Answer 1:

自举的新版本，我所做的CSS是这样的：

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

工作就像一个魅力:)

Answer 2:

不得不加入到我的CSS

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

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

Answer 3:

当我在写这个问题，来到我的脑海从引导包括去除sprites.less。 固定和工作就像一个魅力。

Answer 4:

嘿，我碰到了同样的问题这一天，但我似乎通过添加字体awesome.css下方的样式表的修复和bootstrap.css因为我不能用我的情况LESS来解决它。

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

希望它可以帮助别人。

Answer 5:

如果您使用的是IE 6或7 JS修复文件LTE-ie7.js不指定，如果<IE 8，你会得到双倍的图标了。

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

Answer 6:

请确保您使用的是Twitter的引导CSS没有图标的一部分。

在这种情况下，字体重叠图像。

他们提供了一个版本，专门为这种情况下，

正如你可以看到有CSS的3个主要版本：

• 完成：主+响应+图标
• 无图标：主+响应
• 无响应的行为：主+图标

链接

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

注意清除浏览器的现金用于任何张贴在其他论坛或在这一个解决方案。 卸下精灵或添加修正将解决这个问题，但是，它更好地消除所有关于该图标的CSS。

文章来源: Duplicated icon issue with Twitter Bootstrap and Font Awesome