web-dev-qa-db-ja.com

Bootstrap3-グリフィコンはChromeでは表示されず、

不思議なことに、Bootstrap3グリフィコンはChrome v31（小さな正方形を表示）には表示されません。ただし、FF v26、Opera v18、Safari v5。 1およびIE v10。また、Android 4.x-ChromeおよびFF。

簡単なコードでテスト：<span class="glyphicon glyphicon-adjust"></span>

助けてください。よろしくお願いします！

環境：Windows 8.0

google-chromebrowsertwitter-bootstrap-3glyphicons
8
lupchiazoem

私はあなたの問題を解決するよりも、あなた自身の問題を解決する方法を教えることを好みます。

  1. 要素を右クリックして、「要素の検査」を選択します。これにより、HTMLとそれに適用されるCSSに関する有用な情報を示すウィンドウが表示されます。
  2. （Bootstrap 2）のように）スプライト画像の場合は、右側のCSSを見て、一番上の（取り消し線が引かれていない）background-imageを探します。スプライト画像のURLを参照してください。グリフコン（Bootstrap 3など）の場合は、代わりにfont-familyを探してください。
  3. [ネットワーク]タブに移動します。役立つ情報を表示するには、ページを更新する必要がある場合があります。
  4. そのSpriteイメージまたはフォントをロードした場所を探します（例：glyphicons-halflings-regular.woff）。ステータスが「304」であると表示されている場合は、キャッシュからロードされたことを意味します。その場合、キャッシュをクリアしてページをリロードすると問題が解決する可能性があります。
  5. 「304」ステータスではなかった場合は、Webサーバーが画像を提供していない（「404」または同様のステータス）か、何らかの理由で正しく表示されていない可能性があります。
  6. キャッシュをクリアしても問題が解決しない場合は、[ネットワーク]タブでスプライトの画像またはフォントのURLをクリックし、[プレビュー]タブをクリックします。表示されるのは、アイコンとその他すべてのアイコン、またはそのフォントの英数字を含むブロック画像です。これが表示されているものと異なる場合は、Webサーバーのサービスに問題がある可能性があります。
  7. スプライト画像が正しい場合は、CSSに何らかの問題があり、誤ってスプライトの背景位置を上書きしている可能性があります。もう一度、Elementsタブに戻り、生成されたCSSを確認します。
31
Paul Tomblin

私も同じ問題を抱えていました。最も簡単な解決策は、CSSをハイパーリンクから直接インポートすることです。ダウンロードしないでください。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

問題は、CSSが他のファイルへの他の相対パスを使用することです。したがって、次の2つのことを行うことができます。
1。すべての相対パスをダウンロードします。
2。簡単にハイパーリンクを使用できます。

10
Gines Hidalgo

私はあなたと同じ問題を抱えていました：

  1. CSSフォルダーに移動します。
  2. bootstrap.min.cssファイル。
  3. その中でグリフィコンテキストを検索します。
  4. あなたはそのURLアドレスを見つけることができます。
  5. fontフォルダー名をfontsに変更する必要があります。
  6. 行ってあなたの人生を楽しんでください。 :)
1
mohsen Irani

/ wp-contentの.htaccessで、ファイルタイプの制限が原因でエラーが発生しました。許可されているファイルタイプのリストにwoff2を追加した後、すべてが正常に機能します。

# Protect /Wp-Content/
Order deny,allow
    Deny from all
    <Files ~ ".(xml|css|jpe?g|png|gif|js|svg|pdf|kml|**woff2**)$">
    Allow from all
    </Files>
1
Browsergirl

これはWebKitのバグのようですが、ここで報告されています： https://bugs.webkit.org/show_bug.cgi?id=76152

また、GlyphIconsの作成者は、この問題を認識しており、次のリリースで別のUnicode値を使用してこのバグを回避しようとすると言います： https://Twitter.com/glyphicons/status/423426740128854016 =

1
CBarr

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

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

@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の開発ツールでは、ダウンロードしたフォントがネットワークタブに表示されます。

1
Shiv Singh

フォント応答ヘッダーが "Content-Type：text/html; charset = UTF-8"の場合chrome v38 +は、bootstrap glyphiconsを表示するのに問題があります。応答ヘッダーをに設定すると、これが解決されます。 " -Type：application/font-woff "

0
Jack

主にbootstrapバージョン管理の問題であり、単にURLの下に追加しました。

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css"/>
0
mazhar 124

Bootstrap.min.cssのCSSを調べたところ、「フォント」のディレクトリの場所にスペースが追加されていることがわかりました。これは、ファイル名にスペースが含まれていないため、存在しないファイルを呼び出す必要があることを意味します。たとえば、それはすべての人を通してずっとリストされていました

../fonts/glyphicons-halflings-regular.eot

あるべき時

.. /fonts/glyphicons-halflings-regular.eot

スペースを削除し、CSSを再アップロードし、ブラウザーのキャッシュをクリアして、リファイコン（F5ボタン）をリロードすると、最終的にグリフィコンが表示されました。余分なスペースを削除する前に、私にとって有効だった他の唯一のオプションは、ハイパーリンクを介してCSSをダウンロードすることを提案したGines Hidalgoによって与えられたものでした。ただし、余分なスペースを削除すると問題が解決するという発見により、このオプションは不要になりました。

0
Eric Patterson

bootstrap fontsフォルダーをダウンロードする必要があります。bootstrap.min.cssでglyphiconの../fontsのようなパスを見つけることができます。このパスを "fonts /"に変更する必要があります。 ./フォントフォルダが同じbootstarp.min.css内にある場合。

楽しい ：）

0
Laxmikant

プロジェクトにjs, cssなどのほかにfontsフォルダーがあることを確認します。

Fontsフォルダーがプロジェクトにあり、the bootstrap.min.cssファイルのパスが../fonts/glyphiconsのような場合、つまりfontsフォルダーがcssフォルダーにない場合、すべて正常に動作します。ありがとうございました。

0
Bukenya