web-dev-qa-db-ja.com

Bootstrap 3グリフィコンなしで3をFont Awesomeに置き換え

私はBootstrap 3のグリフィコンを削除してFont Awesomeを支持します。FontAwesomeにはすでにほとんどのグリフィコンが含まれているので、それらを含めたくないので、重複や互換性の問題を避けます。

カスタマイズしたbootstrapダウンロードを作成し、glyphiconコンポーネントのチェックを外しても、cssファイルにいくつかのglyphicon参照がまだ表示されます。 http://getbootstrap.com/customize/ =

これらのアイコンを完全に無効にするにはどうすればよいですか？

ありがとう

twitter-bootstrapfont-awesomeglyphicons
18
denoise

コンパイルされたCSSの残りの6つのグリフィコン参照は、カルーセルコンポーネントの次+前ボタンのグリフィコンのオプションの使用に関するものです。問題の宣言は、Glyphicon以外のnext + prevボタンにも使用されており、合計ファイルサイズのほんのささいな量を表しているため、単に無視することをお勧めします。実際には、ビルドからグリフィコンをすでに削除しています。

上記の参照を完全に消滅させる必要がある場合は、 compile Bootstrap手作業 を使用して、問題の行をbootstrap/less/carousel.lessから削除し、@import "glyphicons.less";行を削除します。 bootstrap/less/bootstrap.less。
または、関連する削除は簡単なので、Bootstrapカスタマイザがすでに生成しているCSSを手動で編集することもできます。

16
cvrebert

bootstrapを使用しているので、ページをカスタマイズし、グリフィコンコンポーネントのチェックを外しましたが、しばらくの間この行を追加しますof codeat my（override file）：

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

また、ダウンロードしたメインのbootstrapファイル（カスタマイズしたファイル））を開いてfont-family: 'Glyphicons Halflings';を検索し、すべての@font-faceにコメントを付けることもできます。

これがあなたを助けることを願っています

4
Ahmed Na.

less の解決策（bootstrap 3.3.5でテスト済み）：

まず、カルーセルのアイコンを上書きします。

// 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の ベースコード に基づいて、 Slava Fomin answer から引用しています。

次のステップ：グリフィコンの読み込みを無効にする：

//** Load fonts from this directory.
@icon-font-path:          "../fonts/";
//** File name for all font files.
@icon-font-name:          "fontawesome-webfont";
//** Element ID within SVG icon file.
@icon-font-svg-id:        "fontawesomeregular";

Lesscについて忘れないでください 遅延読み込み ：@icon-font-svg-idおよびその他の変数には、設定した最新の値が含まれます。

4
maxkoryukov