15

プロジェクトでBootstrap 3を使用しており、バンドルされているGlyphiconsの代わりにFontAwesomeアイコン ライブラリを使用しています。

問題は、Glyphicons に依存するサードパーティ コンポーネントがいくつかあり、それらの HTML を変更したくないことです。

BowerとSASS + Compass (SCSS)を介して font-awesome を含めています。

HTML を変更して別の CSS クラスを適用せずに、Glyphicons を FontAwesome に置き換えることは可能ですか?

4

3 に答える 3

21

次のアプローチを使用して、SCSS を使用してFontAwesomeでGlyphicon CSS クラスをオーバーロードできます。

// Overloading "glyphicon" class with "fa".
.glyphicon {

    @extend .fa;

    // Overloading "glyphicon-chevron-left" with "fa-arrow-left".
    &.glyphicon-chevron-left {
        @extend .fa-chevron-left;
    }

    // Overloading "glyphicon-chevron-right" with "fa-arrow-right".
    &.glyphicon-chevron-right {
        @extend .fa-chevron-right;
    }
}

このソリューションは、Steven Clontzのコードに基づいています。

これがオーバーライドされる前に、FontAwesome SCSS がインポートされていることを確認してください。

上記の例では、次の 2 つのGlyphiconsをオーバーロードしています: chevron-leftとchevron-rightを、FontAwesomeアイコン: arrow-leftとarrow-right に敬意を表してオーバーロードしています。

必要なものを実現するには、サードパーティ コンポーネントで使用されるすべてのアイコンをオーバーロードする必要があります。

ただし、これはハックと見なし、すべてのアイコンを過負荷にしないでください。CSS が不必要に大きくなるからです。

サードパーティ ベンダーに、さまざまなアイコン ライブラリのサポートを実装するよう説得することを検討してください。これは適切な解決策になります。

于 2014-10-29T18:42:21.407 に答える
9

純粋な CSS では、font-awesome クラス (.fa) と同じプロパティを持つ glyphicon クラスを定義し、目的のアイコンに対応させます。

.glyphicon{
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.glyphicon-chevron-left:before{
    content:"\f053"
}
.glyphicon-chevron-right:before{
    content:"\f054"
}
于 2017-03-30T15:36:27.253 に答える