372

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

4

48 に答える 48

239

読者への注意:カスタマイザーのバグに関する@ 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');
}

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

Chrome ネットワーク タブ フォント ダウンロード.

于 2013-08-21T23:10:55.530 に答える
78

私の場合、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
于 2013-10-28T17:12:47.580 に答える
59

-最高評価の回答に従っても、まだ機能しない場合:

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');
}
于 2014-11-05T22:05:08.223 に答える
54

他の解決策が機能しない場合は、Bootstrap にすべてを任せるのではなく、外部ソースから Glyphicons をインポートしてみてください。これをする：

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

<link href="//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

于 2015-06-12T12:51:18.337 に答える
18

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

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension="woff" mimeType="application/font-woff" />
        </staticContent>
    </system.webServer>
</configuration>
于 2015-02-04T14:44:40.080 に答える
8

IIS は既定ではファイルをサーバーに保存しないため、IIS ではファイルにエントリを.woff追加する必要があります。<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>
于 2014-04-30T13:06:56.683 に答える
7

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

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

オリジナルは

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

問題を起こしていた

于 2014-03-30T06:36:56.010 に答える
7

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

glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
于 2013-10-05T18:05:58.390 に答える
5

これは非常に長い撮影ですが、それは私の場合であり、まだここにないためです.

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

しばらく前に SASS ディレクティブがグリフィコン@at-rootの定義で使用されていることが判明しました。 .@font-face

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

于 2015-07-21T22:17:28.247 に答える
5

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

于 2014-03-08T04:40:57.413 に答える
4

注: 以下はニッチなシナリオである可能性がありますが、他の誰かが役立つ場合に備えて共有したいと思います。

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たまたま多くのビューを再利用しているだけで、これでうまくいきました。うまくいけば、これは他の誰かを助けることができます.

于 2014-09-03T18:49:22.450 に答える
4

レンダリングされないフォントに関する公式ドキュメントの内容は次のとおりです。

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

それ以外は、フォントフォルダーをルートディレクトリにコピーし忘れた可能性があります

于 2015-12-09T11:13:14.980 に答える
3

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

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

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

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

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

@icon-font-path:          "fonts/";
于 2013-12-27T06:33:04.673 に答える
3

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

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

于 2013-12-27T14:55:44.117 に答える
3

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

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

ご覧のとおり、images、rss、xml などのファイルは書き換えから除外されていますが、フォント ファイルは.woffand.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、フォント ファイルをロードできるようになり、グリフィコンが正しく表示されるようになります。

于 2016-03-25T00:55:08.150 に答える
2

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

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

http://glyphicons.bootstrapcheatsheets.com/

それが役立つことを願っています。

于 2014-06-20T18:26:07.177 に答える
2 
@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');}

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

于 2015-10-22T05:08:41.767 に答える
2

Ctrl + c、Ctrl + vを使用してbootstrap.cssからフォントの名前を変更したところ、機能しました。

于 2015-11-16T13:41:59.163 に答える
2

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

@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');
}
于 2014-03-28T10:46:21.180 に答える
1

以前の答えはどれも私にはうまくいきません....

問題は、私が試してみたところ、1 時間後に、このアイコンが Bootstrap パックに含まれていない<span class="icones glyphicon glyphicon-pen"> ことに気付きました! 封筒のアイコンは正常に機能していましたが..

于 2016-03-04T23:55:03.917 に答える
1

glyphicons-halflings-regular.woffであるかどうかを確認しますglyphiconshalflings-regular.woff

于 2014-02-12T14:54:01.837 に答える
1

Eclipse で Web フラグメントを使用しているときに、この問題が発生しました。Web フラグメント jar にパックされたときに、フォント ファイルが破損していました。フラグメントが使用されたプロジェクトにフォント ファイルをコピーすると、問題が解決しました。

于 2014-11-03T15:49:35.147 に答える
1

この回答は、Nancy (NancyFx) を使用しているすべての人を対象としています。

ASP.NET でホストされている NancyFX アプリがあり、NuGet 経由で Boostrap を取得しました。

私のグリフィコンは機能していませんでしたが、不良フォント ファイル、不適切な CSS 相対ディレクトリ パス、または他の回答で言及されているその他の問題ではないことが判明しました。

問題は、ナンシーにどこでコンテンツを探せばよいかを伝える慣例を私が見逃していたことでした。これに気付いたら、解決策は単に次のオーバーロードをブートストラップ ファイルに追加することでした。

protected override void ConfigureConventions(NancyConventions nancyConventions)
{
    base.ConfigureConventions(nancyConventions);
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/fonts"));
    nancyConventions.StaticContentsConventions.Add(
        StaticContentConventionBuilder.AddDirectory("/Scripts"));
}
于 2014-03-03T00:31:22.150 に答える
1

ブートストラップ CSS ファイルに CDN を使用している場合、グリフ ファイル (例: glyphicons-halflings-regular.woff ) も CDN から取得されるため、それが原因である可能性があります。

私の場合、Microsoft の CDN を使用してこの問題に直面しましたが、MaxCDNに切り替えることで解決しました。

于 2014-09-17T18:01:28.737 に答える
0

そこのサイトから完全な/カスタマイズされていないパッケージをダウンロードし、フォントファイルをカスタマイズされていないパッケージのフォントに置き換えます。その意志は固定されています。

于 2013-10-27T07:47:22.677 に答える
0

それらを許可するには、いくつかの書き換え条件を作成する必要がありました。

RewriteCond %{REQUEST_URI} !(^.+\.ttf)
RewriteCond %{REQUEST_URI} !(^.+\.eot)
RewriteCond %{REQUEST_URI} !(^.+\.svg)
RewriteCond %{REQUEST_URI} !(^.+\.woff)
于 2014-02-20T09:41:28.857 に答える
0

私は Angular2 と SCSS を使用しています。ベスト プラクティスとして、私が変更しているブートストラップ ファイルのみをプロジェクトにコピーしました。他のファイルはnode_modulesからインポートされます。唯一の問題は Glyphicons にありました。何度も試した結果、フォント ファイルをプロジェクトにコピーし、このパスを$ icon-font-pathに直接設定するのが最善の解決策であることがわかりました。

ここに画像の説明を入力

于 2017-01-09T05:23:07.203 に答える
0

私はVS2015、ASP.NET MVC 6（RC）を使用しており、本番環境（VS（開発）で機能していた）のグリフィコンにも問題（参照へのエラーメッセージ、アイコンが表示されない）がありました。
その理由は、MS cdn ページがダウンしているためのようです (少なくとも現在、スイスから): http://www.websitedown.info/ajax.aspnetcdn.com

したがって (一時的な回避策として)、_Layout.cshtml (環境名="Staging,Production" の下) の外部参照を「内部」参照に変更
しました。

<link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.5/css/bootstrap.min.css"

に

<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.min.css"

それをした後、それは再び機能します。

于 2015-12-10T11:25:47.030 に答える
0

私は同様の問題を抱えていました。ブートストラップに完全に慣れていないので、アイコン名の前にグリフィコンキーワードがないことがわかりました。

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

になるはずだった

<span class="glyphicon glyphicon-search"></span>
于 2020-04-21T10:26:42.383 に答える
-2

CSSのUTF文字の問題のようです。ブートストラップ css ファイルを新しいもので更新するだけです。

于 2014-01-27T13:55:08.403 に答える