86

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

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

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

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

4

9 に答える 9

108

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

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

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

また

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

Bootstrap 3 の便利な変更リストは次のとおりです: http://bootply.com/bootstrap-3-migration-guide

于 2013-08-13T09:47:20.557 に答える
29

どうぞ:

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

詳しくは：

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

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

于 2013-08-13T09:48:09.223 に答える
4

Bootstrap 3 には、i ではなく span タグが必要です

<span class="glyphicon glyphicon-search"></span>`
于 2014-12-16T07:36:04.117 に答える
3

フォントを含める すべてのフォント ファイルを 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>

ソース

于 2013-08-13T09:50:02.047 に答える
3

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
            }]
        }
    },
于 2015-03-19T09:26:55.077 に答える
2

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

<style type="text/css">
        @font-face {
            font-family: 'Glyphicons Halflings';
            src: url('/fonts/glyphicons-halflings-regular.eot');
        }
 </style>
于 2015-09-21T07:50:15.223 に答える
0

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

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

于 2015-09-21T05:26:26.400 に答える