Bootstrap 3 Glyphiconsが機能しない
私はブートストラップ3.0をダウンロードしましたが、グリフィコンを動かすことができません。ある種の "E003"エラーが出ます。なぜこれが起こっているのですか？私はローカルでもオンラインでも試しましたが、それでも同じ問題が発生します。
私はこの古い質問を見ていましたが、これまで正しい答えであると思われていたものがコメントで私から与えられていたので、私もそれに値すると思います。
問題は、ブートストラップのカスタマイザツールからダウンロードされた glyphiconフォントファイルが、ブートストラップのホームページにあるリダイレクトからダウンロードされたものと同じではないことにありました。 正常に動作しているものは、次のリンクからダウンロードできるものです。
http://getbootstrap.com/getting-started/#download
古い悪いカスタマイザファイルに問題がある人は上のリンクからフォントを上書きするべきです。
私は同じ問題を抱えていて、このページの隠されたコメントを除いてそれに関する情報を見つけることができませんでした。 Chromeによると私のフォントファイルは問題なくロードされていましたが、アイコンが正しく表示されませんでした。私はこれを答えにしているので、うまくいけば他の人に役立つでしょう。
Bootstrap 3のカスタマイザツールからダウンロードしたフォントファイルに何か問題がありました。正しいフォントを入手するには、 Bootstrap homepage にアクセスして、完全な.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');
}
ダニエルによって示されるように、それはまたMIMEタイプの問題かもしれません。 Chromeの開発ツールは、ダウンロードしたフォントを[ネットワーク]タブに表示します。
私の場合、モバイルブラウザではglyphicons-halflings-regular.woffに404が表示されていました。
WoffのMIMEタイプについていくつかの混乱があるように見えます。複数のMIMEタイプが異なるブラウザで受け入れられていますが、 W3Cは ：と言っています。
application/font-woff
編集：woffの次のMIMEタイプをテストした後、現在すべてのブラウザで動作します。
application/x-font-woff
編集：現時点での最新バージョンのブートストラップ（3.3.5）は、.woffと同じ初期結果の.woff2フォントを使用しています。W3Cはまだ 仕様を定義しています しかし現時点ではMIMEタイプは次のようです。
application/font-woff2
- 最高の評価を得た回答に従ってもまだ機能しない場合：
FontフォルダMUSTは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="//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
Azure Webサイトに woff MIME構成がありません。次のエントリをweb.configに追加する必要があります。
<configuration>
<system.webServer>
<staticContent>
<mimeMap fileExtension="woff" mimeType="application/font-woff" />
</staticContent>
</system.webServer>
</configuration>
@Stijnが説明したように、Nugetからこのパッケージをインストールする場合、Bootstrap.cssのデフォルトの場所は正しくありません。
このセクションを次のように変更してください。
@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');
}
他の誰かがここでBootstrap> = v4.0を使用してしまった場合： グリフォンのサポートは中止されました
リリースノートの関連部分：
Glyphiconsアイコンのフォントを削除しました。アイコンが必要な場合、いくつかの選択肢があります。
Glyphicons の上流バージョン
ソース： https://v4-alpha.getbootstrap.com/migration/#components
グリフィコンを使いたい場合は、それを個別にダウンロードする必要があります。
私は個人的にFont Awesomeを試してみましたが、とても良いです。アイコンを追加することは、グリピコンの方法と似ています。
<i class="fas fa-chess"></i>
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>
Less variables.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ファイルをダウンロードすると、このコードが実装されます。
アイコンが私のために表示されなかったのはこのためです。
* {
arial, sans-serif !important;
}
私のCSSのこの部分を削除した後は、すべて正常に機能しました。 ！重要なのはトラブルを引き起こしたものでした。
あなたのフォントのディレクトリにすべての以下のファイルがありますか
glyphicons-halflings-regular.eot
glyphicons-halflings-regular.svg
glyphicons-halflings-regular.ttf
glyphicons-halflings-regular.woff
このコード行を追加して完了です。
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
ありがとう。
以下は私のためにそれを修正したものです。 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-sassを使用してSASSからTwitter Bootstrapをコンパイルしている場合。 node-sass。特に古いプロジェクトで作業している場合は、ノードモジュールが最新であることを確認してください。
しばらく前に、グリフィコンの@at-rootの定義にSASSディレクティブ@font-faceが使用されていることがわかりました。 https://github.com/twbs/bootstrap-sass/blob/b01ab4942233bd7316a0634472e1243b13fb9f46/assets/stylesheets /bootstrap/_glyphicons.scss 。
ここでの落とし穴は、そのnode-sassすなわちです。 libsassは、古すぎる場合は@at-rootディレクティブをサポートしません。この場合は、@font-faceにラップされた@at-rootが表示されますが、ブラウザはこれをどうすればよいかわかりません。この結果、フォントはダウンロードされず、アイコンの代わりにゴミが表示される可能性があります。
別の問題/解決策はこの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>
これは、レンダリングされていないフォントに関して公式文書が言っていることです。
アイコンフォントの場所の変更Bootstrapは、アイコンフォントファイルがコンパイル済みCSSファイルを基準にして../fonts/ディレクトリに配置されることを前提としています。これらのフォントファイルを移動または名前変更することは、次の3つの方法のいずれかでCSSを更新することを意味します。ソースのLessファイルの@ icon-font-path変数または@ icon-font-name変数を変更します。 Lessコンパイラが提供する相対URLオプションを利用してください。コンパイル済みCSSのurl（）パスを変更します。特定の開発設定に最も適したオプションを使用してください。
それ以外の場合は、 fontsフォルダをルートディレクトリにコピーできなかった可能性があります
注意：以下の可能性の高いニッチなシナリオですが、私は他の誰かがそれが役に立つかもしれません場合には、それを共有したいと思いました。
Railsプロジェクトでは、私たちはbootstrap-sassを使ったRailsエンジンであるgemを通してかなりの部分を再利用しています。すべてがglyphiconフォントパスの解決を除いた主なプロジェクトでよくでした。
GET http://0.0.0.0:3000/fonts/bootstrap/glyphicons-halflings-regular.woff 404 (Not Found)
解決の間、$bootstrap-sass-asset-helperがfalseであることがわかったので、パスは異なっていました。
次のようにして、エンジンのgemで$bootstrap-sass-asset-helperを初期化しました。
// explicit sprockets import to get glyphicon font paths correct
@import 'bootstrap-sprockets';
@import "bootstrap/variables";
例えばこれはに解決するためのパスを引き起こしました：
/assets/bootstrap/glyphicons-halflings-regular.woff
繰り返しますが、これはbootstrap-sassを使用する通常のRailsプロジェクトでは必要ないはずです。たまたま多くのビューを再利用しているだけなので、これでうまくいきました。うまくいけば、これは他の誰かを助けることができます。
私はこの問題を抱えていて、それはvariables.lessファイルによって引き起こされました。 icon-font-pathの値を設定するためにそれを上書きすると問題は解決しました。
ファイル構造は次のようになります。
\Content
\Bootstrap
\Fonts
styles.less
variables.less
Contentのルートに自分のvariables.lessファイルを追加してこれをstyles.lessで参照することで404エラーを解決しました。
Variables.lessに含まれるもの：
@icon-font-path: "fonts/";
フォントファミリを指定し過ぎていないことを確認してください。例えば、
*{font-family: Verdana;}
i要素からハーフリングフォントを削除します。
私はNuGetからBootstrapを入手しました。私のサイトを公開したとき、グリフは機能しませんでした。
私の場合は、各フォントファイルのBuild Actionを 'Content'に設定し、それらを 'Copy Always'に設定することでうまくいきました。
私はブラウザがフォントファイルを見つけることができなかったという同じ問題を抱えていました、そして、私の問題は処理のために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]
ご覧のとおり、images、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を追加すると、フォントファイルをロードできるようになり、グリフィコンは正しく表示されるはずです。
私はglyphicon-arrow-downのためのボックス幅コード\ e094を持っていました、実際に私はそのようなCSSクラスで glyphicon を追加する問題を解決しました：
<i class="glyphicon glyphicon-arrow-down"></i>
それが誰かを助けることができれば...
Ctrl + C、Ctrl + Vを使用してbootstrap.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');
}
に
@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');
}
この順序で設定する必要があります。
<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>
これが、ブートストラップ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');}
私はうまく機能していませんが、正常に機能しているコードglyphiconsに上記の行を追加した後に、名前空間とglyphiconsでブートストラップを使用しています。
この順序で設定する必要があります。
<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>
EclipseでWebフラグメントを使用しているときにこの問題が発生しました。フォントファイルは、Webフラグメントjarに圧縮されたときに破損していました。フラグメントが使用されているプロジェクトにフォントファイルをコピーすることで問題は解決しました。
この答えはNancy（NancyFx）を使用している人のためのものです。
私はASP.NETでホストされているNancyFXアプリを持っていて、NuGet経由でBoostrapを入手しました。
私のグリフアイコンは機能していませんでしたが、それは悪いフォントファイル、誤ったCSS相対ディレクトリパス、または他の答えで言及されている他のもののいずれでもないことが判明しました。
問題は、私がコンベンションを見逃していたことで、Nancyにどこでコンテンツを探すべきかを伝えていました。私がそれに気付いたら、解決策は私のブートストラップファイルに次の過負荷を単に追加することでした：
protected override void ConfigureConventions(NancyConventions nancyConventions)
{
base.ConfigureConventions(nancyConventions);
nancyConventions.StaticContentsConventions.Add(
StaticContentConventionBuilder.AddDirectory("/fonts"));
nancyConventions.StaticContentsConventions.Add(
StaticContentConventionBuilder.AddDirectory("/Scripts"));
}
ブートストラップCSSファイルにCDNを使用している場合は、CDNからグリフファイル（ glyphicons-halflings-regular.woff など）も取得されるため、それが原因である可能性があります。
私の場合は、MicrosoftのCDNを使用してこの問題に直面しましたが、 MaxCDN に切り替えて解決しました。
Visual Studio（2015、私の場合）を使用してブートストラップテーマでASP.NET WebフォームWebアプリケーションを作成した場合、既定では、グリフィコンはプロジェクトルートの/ fontsフォルダに格納されます。
/ Contentの下のブートストラップファイルを（たとえば複数のテーマをサポートするために）サブフォルダに再配置し始めると、ブートストラップ内の../fonts/への参照はすべて壊れます。 fontsフォルダーを/Contentの下の適切な相対パスに移動するか、またはすべての参照を../fontsから/fontsに名前変更することができます。
glyphicons-halflings-regular.woffであってglyphiconshalflings-regular.woffではないか確認してください
私も同じ問題に直面しました、CSSは大丈夫で問題はありませんでした。すべてのフォントも含まれていました。
しかし、問題が解決したのは、UIにアイコンが正しく表示されるようになった "glyphicons-halflings-regular.ttf"をインストールした後です。
そのサイトからフル/カスタマイズされていないパッケージをダウンロードし、あなたのフォントファイルをカスタマイズされていないパッケージのフォントに置き換えます。その意志は修正されました。
私は VS2015では、ASP.NET MVC 6（RC） で動作していました（それはVS（開発）で動作していました）。 。
その理由は、MSのCDNページが（少なくとも現在、スイスから）ダウンしているためと思われます。 http://www.websitedown.info/ajax.aspnetcdn.com
そのため（一時的な回避策として）、_Layout.cshtml（環境名= "Staging、Production"）の外部参照を "internal"参照に変更しました。
から：
<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"
それをした後に、それは再び働きます。
私はAngular 2とSCSSを使って作業しています。ベストプラクティスとして、私が変更したブートストラップファイルだけを node_modules からインポートしたものをプロジェクトにコピーしました。何度も試した結果、私に最適な解決策は自分のプロジェクトにフォントファイルをコピーして、このパスを $ icon-font-path に直接設定することです。
前の答えのどれも私のために働きません....
問題は、私が<span class="icones glyphicon glyphicon-pen">を試していて、1時間後にこのアイコン がBootstrapパックに含まれていなかったことに気付いたことです ！封筒のアイコンが正常に動作していた間..
それらを許可するために私はいくつかの書き換え条件を作成しなければなりませんでした：
RewriteCond %{REQUEST_URI} !(^.+\.ttf)
RewriteCond %{REQUEST_URI} !(^.+\.eot)
RewriteCond %{REQUEST_URI} !(^.+\.svg)
RewriteCond %{REQUEST_URI} !(^.+\.woff)