web-dev-qa-db-ja.com

HTMLを変更せずにBootstrap 3でGlyphiconsをFontAwesomeに置き換える方法は？

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

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

Bower と [〜＃〜] sass [〜＃〜] + Compass （SCSS）を介してfont-awesomeを含めています。

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

twitter-bootstrapsassfont-awesomecompassglyphicons
13
Slava Fomin II

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

// 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;
    }
}

この解決策は コードに基づく ofSteven Clontzです。

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

上記の例では、次の2つのグリフィコンをオーバーロードしています：chevron-leftとchevron-rightと次のFontAwesomeアイコン：arrow-leftとarrow-rightそれぞれ。

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

ただし、これを[〜＃〜] hack [〜＃〜]およびすべてのアイコンに過負荷をかけないでください、CSSが不必要に大きくなるからです！

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

20
Slava Fomin II

この要点を作成して、すべてのグリフィコンアイコンをfont-awesomeにマッピングしました。私はそれが約95％の精度とカバレッジを持っていると推定します（glyphiconにはfont-awesomeにはないいくつかの役に立たないアイコンがあります）。

https://Gist.github.com/blowsie/15f8fe303383e361958bd53ecb7294f9

code removed in favor of Gist

bootstrapビルドからすべてのグリフィコンアイコンを削除すると、すべてのアイコンがオーバーロードされますが、実際には数バイト節約できます（もちろんフォントは素晴らしいです）

7
Blowsie

純粋な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"
}
6
hugsbrugs