web-dev-qa-db-ja.com

Bootstrap 3はグリフィコンを正しく表示できません

bootstrap 2.3からbootstrap 3に移行していますが、すべて正常に動作します。しかし、いくつかのアイコンを追加しようとすると、アイコンのフォントが正しく表示されません。ここに目を通そうとしました http://bootply.com/61521 と '.glyphicon-envelope'のみが正しく表示されていました。その他は「E001」などのように表示されます。

この問題を解決するにはどうすればよいですか？

他のブラウザの場合、グリフィコンは適切に表示されますが、Firefoxのみがグリフィコンを適切に表示できませんでした。

css3twitter-bootstrap-3glyphicons
55
iSa

OK、私の問題は上記によって答えられませんでした。 bootstrap cssおよびjsフォルダーと同じ場所にfontsフォルダーがありましたが（例：/ theme/bootstrap3/..）、ルート内のフォントフォルダーを探していました（たとえば/ fonts/glyph .. .woff）

私にとっての解決策は、@ icon-font-path変数を正しい相対パスに設定することでした。

例：@ icon-font-path： "fonts /";

29
brad

Bootstrapのカスタマイズバージョンを選択しましたか？カスタマイズされたパッケージに含まれるフォントファイルが破損しているという問題があります（ https://github.com/twbs/bootstrap/issues/9925 を参照）。 CDNを使用したくない場合は、手動でダウンロードし、ダウンロードしたフォントで独自のフォントを置き換える必要があります。

https://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.svghttps://netdna.bootstrapcdn.com/bootstrap/3.0。 0/fonts/glyphicons-halflings-regular.woffhttps://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.ttfhttps://netdna.bootstrapcdn.com/bootstrap/3.0.0/fonts/glyphicons-halflings-regular.eot

その後、強力なリロード（CTRL + F5）を試してください。

78
Toni

アイコンとcssがブートストラップから分離されました。ここに別のstackoverflowの答えからのフィドルがあります

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

http://jsfiddle.net/aQrPd/1/

ブートストラップ3グリフィコンCDN

40
Anton

これが私のために働いた修正です。 Firefoxには、これを引き起こすファイルOriginポリシーがあります。修正するには、次の手順を実行します。

  1. firefoxでabout：configを開きます
  2. Security.fileuri.strict_Origin_policyプロパティを見つけて、「true」から「false」に変更します。
  3. ほら！準備できた！

詳細： http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_Origin_policy_and_web_fonts

File：///プロトコルを使用してファイルにアクセスする場合にのみ、この問題が表示されます。

11
hellojava

ローカルApacheサーバーを使用しても同じ問題が発生しました。これは私の問題を解決しました：

http://www.ifusio.com/blog/firefox-issue-with-Twitter-bootstrap-glyphicons

Amazon s3の場合、CORS設定を編集する必要があります。

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>
6
robodo

まず、Zipファイルを使用して、「公式」な方法でグリフィコンフォントをインストールしようとします。できませんでした。

これは私の段階的なソリューションです：

  1. BootstrapのWebページに移動してから、[コンポーネント]セクションに移動します。
  2. ブラウザコンソールを開きます。 Chromeでは、Ctrl + Shift + C。
  3. 「リソース」セクションの「Frames/getbootstrap.com/Fonts」内に、実際にグリフィコンを実行しているフォントがあります。キャッシュを回避するためにプライベートモードを使用することをお勧めします。
  4. フォントファイルのURL（リソースリストに表示されているファイルを右クリック）を使用して、新しいタブにコピーし、Enterキーを押します。これにより、フォントファイルがダウンロードされます。
  5. タブ内のURLをもう一度コピーし、フォントの拡張子をeot、ttf、svg、またはwoffに変更します。

ただし、より簡単なアクセスのために、これはwoffファイルのリンクです。

http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff

5
MARC.RS

最終的にFont-Awesome Iconsに切り替えました。彼らは良くないにしても同じくらい良いです、そしてあなたがする必要があるのはフォントにリンクすることです、幸せな日。

3
Paul 501

フォント名を含むフォルダの名前が「font」ではなく「fonts」であることを確認してください

2
Newbie

念のため ：

たとえば、<span class="icones glyphicon glyphicon-pen">を試したところ、1時間後にこのアイコンがbootstrapパックに含まれていないことに気づきました!!エンベロープアイコンが正常に機能している間..

お役に立てれば

1
538ROMEO

次のようなタグを使用できます。

<i class="fa fa-edit"></i>
1
AzizAhmad

Bootstrap.cssで指定された場所ごとにfontsフォルダーを配置して、問題を解決しました

ほとんどの場合、そのfontsフォルダーはbootstrap.cssファイルの親ディレクトリーにある必要があります。

私はこの問題に直面し、多くの答えを調査しましたが、2015年にまだ誰かがこの問題に直面している場合、CSSの問題、またはファイルの場所の不一致のいずれかです。

バグはすでにブートストラップによって解決されています

0
Divyanshu Jimmy

これは、上記の回答をサポートする公式ドキュメントです。

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

公式ウェブサイトからbootstrap Zipをダウンロードした後、新しいユーザーが犯すこの1つの間違い以外は。開発者のセットアップでコピーするために、フォントフォルダーをスキップする傾向があります。 フォントフォルダーがないと、この問題が発生する可能性があります

0
gates

他の人が指摘したように、カスタマイザーにはいくつかの問題があります。

グリフィコンが表示されない問題や、navbarレイアウトの問題がありました。

提案を使用して、完全なZipからフォントをアップロードし、カスタマイズされたバージョンからフォントを上書きし、アイコンの問題を修正しました。

また、CDNからのローカルコピーの代わりにCDN CSSとjavascriptを取り込みました。これでnavbarの問題が修正されました。

そのため、Bootstrapがハングするまでは、イライラするような望ましくない結果になる可能性があるため、カスタマイズバージョンを使用しないことをお勧めします。

0
trebor1979