Twitter Bootstrap和Font Awesome的重复图标问题

Question

我遇到了这个菜单的问题，图标使用bootstrap和font awesome，格式较少，并且在运行时使用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

使用新版本的bootstrap，我在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

当我写这个问题的时候，我想到了删除spritees.less来自bootstrap include。固定和工作就像一个魅力。

Answer 4

嘿，我今天遇到了同样的问题，但我似乎通过在 font-awesome.css 和 bootstrap.css 下添加样式表修复来解决它。强>因为我不能在我的情况下使用LESS。

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

希望它有所帮助。

Answer 5

如果您使用IE 6或7 JS修复文件 lte-ie7.js 而未指定是否＆lt; IE 8，你也会得到双重图标。

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

Answer 6

确保您使用的Twitter Bootstrap css没有图标部分。

在这种情况下，字体覆盖图像。

他们提供专门针对此案例的版本

正如您所看到的，CSS有3个主要版本：

• 完成：主要+响应+图标
• 没有图标：主要+响应
• 没有响应行为：main + icon

link

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

请注意清除浏览器现金，以获取在其他论坛或此论坛上发布的任何解决方案。删除精灵或添加更正将解决问题，但最好删除所有关于图标的CSS。