ブートストラップ3グリフィコンが機能しない

ブートストラップ3.0をダウンロードしましたが、グリフィコンを機能させることができません。なんらかの「E003」エラーが出ます。なぜこれが起こっているのですか？ローカルでもオンラインでも試しましたが、同じ問題が発生します。

私は同じ問題を抱えていて、このページの非表示のコメントを除いて、それに関する情報を見つけることができませんでした。Chromeによると、フォントファイルは問題なく読み込まれていましたが、アイコンが正しく表示されませんでした。私はこれを答えにしているので、うまくいけば他の人を助けるでしょう。

Bootstrap 3のカスタマイザツールからダウンロードしたフォントファイルに問題がありました。正しいフォントを入手するには、Bootstrapホームページにアクセスして、完全な.zipファイルをダウンロードします。そこから4つのフォントファイルをフォントディレクトリに抽出すると、すべてが機能するはずです。

読者への注意：カスタマイザのバグに関する@ user2261073のコメントと@Jeff の回答を必ず読んでください。それはおそらくあなたの問題の原因です。

フォントファイルが正しく読み込まれていません。ファイルが予期した場所にあるかどうかを確認します。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

Danielが示したように、それはMIMEタイプの問題である可能性もあります。Chromeの開発ツールでは、ダウンロードしたフォントがネットワークタブに表示されます。

私の場合、glyphicons-halflings-regular.woffの 404と、モバイルブラウザーで非表示のグリフィコンを取得していました。

woffのMIMEタイプについていくつかの混乱があるように見えます。複数のMIMEタイプが異なるブラウザーで受け入れられていますが、W3Cはこう言っています：

application/font-woff

編集：woffの次のMIMEタイプをテストした後、現在すべてのブラウザーで機能します。

application/x-font-woff

編集：現時点でのBootstrapの最新バージョン（3.3.5）は、.woffと同じ初期結果の.woff2フォントを使用します。W3Cはまだ仕様を定義していますが、現時点ではMIMEタイプは次のようになります。

application/font-woff2

-最高評価の回答に従っても問題が解決しない場合：

Fontフォルダがしなければならない、あなたのCSSのフォルダと同じレベルになります。パスを修正してbootstrap.css も機能しません。

Bootstrap.css移動しているFontsフォルダまさにこのように：

@font-face {
    font-family: 'Glyphicons Halflings';

    src: url('../fonts/glyphicons-halflings-regular.eot');
    src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

他のソリューションが機能しない場合は、Bootstrapを使用してすべてを実行するのではなく、外部ソースからGlyphiconsをインポートしてみてください。これをする：

HTMLでこれを行うことができます。

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

またはCSS：

@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css")

このスレッドからのedsiofiへのクレジット：Bootstrap 3 Glyphicons CDN

他の誰かがここに行き、 Bootstrap> = v4.0を使用している場合：glyphiconサポートが削除されます

リリースノートの関連部分：

Glyphiconsアイコンのフォントを削除しました。アイコンが必要な場合、いくつかのオプションがあります。

グリフィコンの上流バージョン

オクチコン

素晴らしいフォント

ソース：https : //v4-alpha.getbootstrap.com/migration/#components

グリフィコンを使用する場合は、個別にダウンロードする必要があります。

私は個人的にFont Awesomeを試してみましたが、それはとても良いです。アイコンの追加は、グリピコンの方法に似ています：

<i class="fas fa-chess"></i>

私はこの私の古い質問に目を通していましたが、これまで正解であったはずのものがコメントで私から与えられたので、私もそれに値する価値があると思います。

問題は、ブートストラップのカスタマイザツールからダウンロードされたグリフィコンフォントファイルが、ブートストラップのホームページにあるリダイレクトからダウンロードされたものと同じではないという事実にありました。正常に機能しているのは、次のリンクからダウンロードできるものです。

http://getbootstrap.com/getting-started/#download

古い不良カスタマイザファイルに問題がある場合は、上のリンクのフォントを上書きしてください。

Azure Webサイトにwoff MIME構成がありません。次のエントリをweb.configに追加する必要があります

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration> 

@Stijnが説明したように、Bootstrap.cssからこのパッケージをインストールする場合、のデフォルトの場所は正しくありませんNuget。

このセクションを次のように変更します。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('Content/fonts/glyphicons-halflings-regular.eot');
  src: url('Content/fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded- opentype'), url('Content/fonts/glyphicons-halflings-regular.woff') format('woff'), url('Content/fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('Content/fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

このコード行を追加して完了できます。

<link href="https://stackoverflow.com//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">

ありがとう。

IISは.woffデフォルトではファイルを提供しないため、IISではファイルに<mimeMap>エントリを追加する必要がありweb.configます。

<?xml version="1.0" encoding="UTF-8"?>
<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".woff" mimeType="application/x-woff" />
        </staticContent>
    </system.webServer>
</configuration>

フォントディレクトリに以下のすべてのファイルがありますか

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff

less変数を変更しました。lessファイル変数を変更しました

@icon-font-path:          "fonts/";    

オリジナルは

@icon-font-path:          "../fonts/"; 

問題を引き起こしていた

これは、bootstrap.cssおよびbootstrap.min.cssの誤ったコーディングが原因です。カスタマイザからBootstrap 3.0をダウンロードすると、次のコードが見つかりません。

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

これはGlyphiconsを使用するためのメインコードであるため、機能しません...

完全なパッケージからcss-filesをダウンロードすると、このコードが実装されます。

これが理由で、アイコンが表示されませんでした：

* {
    arial, sans-serif !important;
}

私が私ののこの部分を削除した後CSS、すべてがそれのように機能しました。重要なのは問題を引き起こしたものでした。

別の問題/解決策は、このBootstrap 2.xコードがある可能性があります。

<button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>

ガイドに基づいて移行する場合（.icon-* ---> .glyphicon .glyphicon-*）：

<button class="btn btn-default" ng-click="open()"><i class="glyphicon-calendar"></i></button>

アイコンクラス（フォント参照を含む）を追加するのを忘れた場合：

<button class="btn btn-default" ng-click="open()"><i class="glyphicon glyphicon-calendar"></i></button>

以下は私のためにそれを修正したものです。Firebugコンソールで「不正なURI」エラーが発生しました。アイコンはE ###番号として表示されていました。'fonts'ディレクトリに.htaccessファイルを追加する必要がありました。 <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> Header set Access-Control-Allow-Origin "*" </IfModule> </FilesMatch> 重複の可能性：Firefoxのダウンロード可能なフォント：不正なURIまたはクロスサイトアクセスは許可されていません

これは非常に長い撮影ですが、これは私のケースであり、ここにはまだありません。

gulp-sassまたはgrunt-sassie を使用してSASSからTwitter Bootstrapをコンパイルする場合。node-sass。特にかなり古いプロジェクトで作業している場合は、ノードモジュールが最新であることを確認してください。

SASSディレクティブ@at-rootが@font-faceグリフィコンのの定義で使用されていることが判明しました。https： //github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets/bootstrap/_glyphicons.scssを参照してください。

ここでの落とし穴は、node-sassつまりです。ディレクティブが古すぎる場合libsassはサポートしないでください@at-root。これが当てはまる場合は、ブラウザーが何を処理するのかわからない@font-faceラップが発生します@at-root。この結果、フォントはダウンロードされず、アイコンの代わりにゴミが表示される可能性があります。

注：以下はおそらくニッチなシナリオですが、他の誰かが役立つと思われる場合に備えて共有したいと思います。

Railsプロジェクトでは、を使用するRailsエンジンであるgemを介してかなりの部分を再利用していますbootstrap-sass。グリフィコンフォントパスの解決を除いて、すべてがメインプロジェクトでうまくいきました。

GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found) 

私たちはそれ$bootstrap-sass-asset-helperがfalse我々はそれが真実であると予想するときのパスが違っていたので、解決中。

次の$bootstrap-sass-asset-helperようにして、エンジンgemでを初期化しました。

// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";

たとえば、これによりパスが次のように解決されました。

/assets/bootstrap/glyphicons-halflings-regular.woff

繰り返しますが、これはを使用する通常のRailsプロジェクトでは必要ありません。bootstrap-sassたまたま、多くのビューを再利用しているだけで、これはうまくいきました。うまくいけば、これは他の誰かを助けることができます。

これは、フォントがレンダリングされないという公式ドキュメントの説明です。

アイコンフォントの場所の変更Bootstrapは、アイコンフォントファイルが、コンパイルされたCSSファイルに対して../fonts/ディレクトリにあると想定しています。これらのフォントファイルを移動または名前を変更するには、次の3つの方法のいずれかでCSSを更新します。ソースのLessファイルの@ icon-font-path変数または@ icon-font-name変数を変更します。Lessコンパイラーが提供する相対URLオプションを利用します。コンパイルされたCSSのurl（）パスを変更します。特定の開発設定に最も適したオプションを使用してください。

それ以外に、フォントフォルダーをルートディレクトリにコピーできなかった可能性があります

私はこの問題を抱えていましたが、それはvariables.lessファイルが原因でした。これをオーバーライドしてicon-font-path値を設定すると、問題は解決しました。

構造化されたファイルは次のようになります。

\Content
        \Bootstrap
        \Fonts
 styles.less
 variables.less

Contentのルートに自分のvariables.lessファイルを追加し、これをstyles.lessで参照すると、404エラーが解決しました。

Variables.lessには以下が含まれます：

@icon-font-path:          "fonts/";

NuGetからBootstrapを入手しました。私のサイトを公開したとき、グリフが機能しませんでした。

私の場合、各フォントファイルのビルドアクションを「コンテンツ」に設定し、「常にコピーする」に設定することで機能しました。

私はglyphicon-arrow-downのボックス幅コード\ e094を持っていましたが、実際にそのようなcssクラスにglyphiconを追加する問題を解決しました：

<i class="glyphicon  glyphicon-arrow-down"></i>

それが誰かを助けることができれば...

たとえば、フォントファミリーを指定しすぎていないことを確認してください。

*{font-family: Verdana;}

i要素からハーフリングフォントを削除します。

ブラウザーがフォントファイルを見つけられないという同じ問題がありました。私の問題はindex.php、処理のために送信されるべきではないファイルをホワイトリストに登録していた.htaccessファイルの除外が原因でした。フォントファイルを読み込めなかったため、文字はBLOBに置き換えられました。

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

ご覧のとおり、画像、rss、xmlなどのファイルはリライトから除外されていますが、フォントファイルは.woffと.woff2ファイルであるため、これらもホワイトリストに追加する必要がありました。

RewriteCond %{REQUEST_URI} !\.(jpg|png|gif|svg|css|js|ico|rss|xml|json|woff|woff2)$
RewriteCond %{REQUEST_URI} !-d
RewriteRule ^ index.php [L,QSA]

ホワイトリストにを追加するwoffとwoff2、フォントファイルが読み込まれ、グリフィコンが正しく表示されます。

この順序で設定する必要があります。

<link rel="stylesheet" href="path/bootstrap.min.css"> 
<style type="text/css"> 
     @font-face {   font-family: 'Glyphicons Halflings';   
     src: url('../fonts/glyphicons-halflings-regular.eot');   
     src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), 
     url('../fonts/glyphicons-halflings-regular.woff') format('woff'),  
     url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), 
     url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg'); } 
</style>

私にとってうまくいったのは、ルートを次のものから置き換えることでした：

@font-face {
  font-family: 'Glyphicons Halflings';
  src: url('../fonts/glyphicons-halflings-regular.eot');
  src: url('../fonts/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');
}

に

@font-face {
  font-family: 'Glyphicons Halflings';

  src: url('/assets/glyphicons-halflings-regular.eot');
  src: url('/assets/glyphicons-halflings-regular.eot?#iefix') format('embedded-opentype'),
  url('/assets/fonts/glyphicons-halflings-regular.woff') format('woff'),
  url('/assets/glyphicons-halflings-regular.ttf') format('truetype'),
  url('/assets/glyphicons-halflings-regular.svg#glyphicons_halflingsregular') format('svg');
}

これは、ブートストラップ3にアイコンを含める方法です

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

http://glyphicons.bootstrapcheatsheets.com/

お役に立てば幸いです。

@font-face {
     font-family: 'Glyphicons Halflings';
      src: url('../fonts/glyphicons-halflings-regular.eot');
      src: url('../fonts/glyphicons-halflings-regular.eot?#iefix')         format('embedded-opentype'), url('../fonts/glyphicons-halflings-regular.woff') format('woff'), url('../fonts/glyphicons-halflings-regular.ttf') format('truetype'), url('../fonts/glyphicons-halflings-regular.svg#glyphicons-halflingsregular') format('svg');}

名前空間とグリフィコンが機能しない状態でブートストラップを使用していますが、コードに上記の行を追加した後、グリフィコンは正常に機能します。

私はCtrl + c、Ctrl + vを使用してbootstrap.cssからフォントの名前を変更しただけで動作しました。