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

この質問を書いているときに、ブートストラップに含まれるスプライトを削除することにしました。修正され、チャームのように機能しました。

于 2012-07-12T12:57:17.597 に答える
4

今日も同じ問題が発生しましたが、自分の状況ではLESSを使用できないため、 font-awesome.cssとbootstrap.cssの下にスタイルシートの修正を追加することで解決したようです。

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

それが誰かを助けることを願っています。

于 2012-09-16T20:42:34.573 に答える
3

<IE8かどうかを指定せずにIE6または7JS修正ファイルlte-ie7.jsを使用している場合は、二重アイコンも表示されます。

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

アイコン部分なしでTwitterBootstrapcssを使用していることを確認してください。

この場合、フォントは画像をオーバーレイしています。

この場合に特別なバージョンを提供します

ご覧のとおり、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スタイルシートの挿入に変更することでした。

FontAwesomeCDNまたは独自にダウンロードした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 に答える