web-dev-qa-db-ja.com

ブートストラップ3.0でグリフィンを使用する方法

私はすでにブートストラップ2.3でグリフィコンを使っていますが、今はブートストラップ3.0にアップグレードしました。今、私はiconプロパティを使用することができません。

ブートストラップ2.3では、以下のタグが機能しています

<i class="icon-search"></i>

ブートストラップ3.0では、うまくいきません。

html5css3twitter-bootstrap-3
86
Shivang Gupta

アイコン（グリフ）は 個別のcssファイル.. に含まれています。

マークアップは次のように変更されました。

<i class="glyphicon glyphicon-search"></i>

または

<span class="glyphicon glyphicon-search"></span>

これはBootstrap 3のための変更の有用なリストです： http://bootply.com/bootstrap-3-migration-guide

107
Zim

そこに行きます：

<i class="glyphicon glyphicon-search"></i>

追加情報：

http://getbootstrap.com/components/#glyphicons

ところで。あなたはこれを使うことができます 変換ツール 、これはアイコンのコードも更新します。

29
TheNiceGuy

カスタマイズしたブートストラップ3ディストリビューションをダウンロードする場合は、次の手順を実行する必要があります。

  1. https://github.com/twbs/bootstrap/archive/v3.0.0.Zip から完全なディストリビューションをダウンロードしてください
  2. fontsというフォルダ全体を解凍して、ブートストラップディレクトリにアップロードします。他のフォルダ "css、js"とまとめてください。

前の例：

\css
\js
index.html

アップロード後の例：

\css
\fonts
\js
index.html
19
Emiliano Díaz

Lessを使用していて、アイコンフォントをロードしていないのなら、フォントパスをチェックアウトしてファイルvariable.lessに移動し、@ icon-font-pathを変更してください。 =パス​​、それは私のために働いた。

6
alejandro

Bootstrap 3は私ではなくspanタグが必要です

<span class="glyphicon glyphicon-search"></span>`
4
stranger4js

あなたがあなたのアプリケーションをビルドするのにgruntを使っているなら、ビルド中にパスが変わる可能性があります。この場合、gruntファイルをこのように修正する必要があります。

copy: {
        main: {
            files: [{
                src: ['fonts/**'],
                dest: 'dist/fonts/',
                filter: 'isFile',
                expand: true,
                flatten: true
            }, {
                src: ['bower_components/font-awesome/fonts/**'],
                dest: 'dist/css/',
                filter: 'isFile',
                expand: true,
                flatten: false
            }]
        }
    },
3
Anke Wenz

フォントを含めるすべてのフォントファイルをCSSの近くの/ fontsディレクトリにコピーします。

  1. CSSまたはLESSを含めるプロジェクトでフォントを有効にするには、Vanilla CSSまたはソースLESSの2つのオプションがあります。 Vanilla CSSの場合は、/ cssからコンパイルされたCSSファイルをリポジトリに含めるだけです。
  2. LESSの場合は、。lessファイルを/ lessから自分のファイルにコピーします。既存のブートストラップディレクトリ。それからbootstrap.lessにインポートします。@ import "bootstrap-glyphicons.less";。準備ができたら再コンパイルしてください。
  3. いくつかのアイコンを追加！フォントとCSSを追加したら、アイコンを使うことができます。例えば、<span class="glyphicon glyphicon-ok"></span>

出典

3
Mark Anthony Uy

ブートストラップからすべてのファイルをダウンロードして、このcssを含めます

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>
2
User_3535

これは役に立つかもしれません。それは理解に役立つ多くの例を含みます。

http://www.w3schools.com/bootstrap/bootstrap_ref_comp_glyphs.asp

0
Mushu