10

我遇到了这个菜单的问题，其图标使用引导程序和字体真棒，格式较少，并且在运行时使用 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>

浏览器输出：

重复的图标

4

7 回答 7

22

使用新版本的引导程序，我在 CSS 上所做的是：

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

像魅力一样工作:)

于 2012-09-30T18:25:55.823 回答
5

必须将此添加到我的 CSS

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

.btn [class^="icon-"], .btn [class*=" icon-"] {
    line-height: 1.3em;
}
于 2012-12-19T12:05:07.760 回答
4

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

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

希望它可以帮助某人。

于 2012-09-16T20:42:34.573 回答
4

当我写这个问题时，我想到从引导程序中删除 sprites.less 包括。固定并像魅力一样工作。

于 2012-07-12T12:57:17.597 回答
3

如果您使用 IE 6 或 7 JS 修复文件lte-ie7.js而不指定 if < IE 8，您也会得到双图标。

<!--[if lt IE 8]>
<script src="lte-ie7.js"></script>
<![endif]-->
于 2013-02-01T08:07:44.807 回答
0

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

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

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

如您所见，CSS 有 3 个主要版本：

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

关联

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

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

于 2013-10-04T02:12:11.087 回答
0

对我来说，上述所有需要将 FA 图标的背景更改为 的解决方案都none不起作用。我使用的是由 javascript 插入的 Fontawesome 套件。

对我有用的解决方案是通过 javascript 插入将 Fontawesome 的实现更改为 css 样式表注入。

您可以使用 FontAwesome CDN 或您自己下载的 css：

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
于 2021-10-08T07:36:16.387 回答