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

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

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

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

ブートストラップ3.0では、機能していません。

アイコン（グリフィコン）は、別のcssファイルに含まれるようになりました。

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

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

または

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

Bootstrap3の変更点の役立つリストを次に示します。http：//bootply.com/bootstrap-3-migration-guide

そこに行きます：

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

詳しくは：

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

ところで。この変換ツールを使用できます。これにより、アイコンのコードも更新されます。

カスタマイズされたブートストラップ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

lessを使用していて、アイコンフォントが読み込まれない場合は、フォントパスを確認してファイルvariable.lessに移動し、@ icon-font-pathパスを変更する必要があります。

ブートストラップ3には、iではなくスパンタグが必要です

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

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

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

ソース

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
            }]
        }
    },

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

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

これは役立つかもしれません。理解に役立つ多くの例が含まれています。

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