ブートストラップ 2.3 からブートストラップ 3 に移行していますが、すべて正常に動作しています。しかし、いくつかのアイコンを追加しようとすると、アイコンのフォントが正しく表示されません。ここhttp://bootply.com/61521を見てみましたが、「.glyphicon-envelope」だけが正しく表示されていました。他は「E001」などと表示されています。
どうすればこの問題を解決できますか?
他のブラウザでは、グリフィコンは正しく表示されますが、firefox だけは正しく表示できませんでした。
アイコンと css がブートストラップから分離されました。これは、別のスタックオーバーフローの回答からのフィドルです
@import url("//netdna.bootstrapcdn.com/bootstrap/3.0.0-rc2/css/bootstrap-glyphicons.css");
これが私のために働いた修正です。Firefox には、これを引き起こすファイル生成元ポリシーがあります。修正するには、次の手順を実行します。
詳細: http://stuffandnonsense.co.uk/blog/about/firefoxs_file_uri_origin_policy_and_web_fonts
この問題は、file:/// プロトコルを使用してファイルにアクセスする場合にのみ発生します。
まず、zip ファイルを使用して「公式」の方法で glyphicons フォントをインストールしようとしました。できませんでした。
これは私の段階的な解決策です：
ただし、より簡単にアクセスするには、これが woff ファイルのリンクです。
http://getbootstrap.com/dist/fonts/glyphicons-halflings-regular.woff
次のようなタグを使用できます。
<i class="fa fa-edit"></i>
念のため ：
たとえば、試し<span class="icones glyphicon glyphicon-pen">
てみたところ、1時間後に、このアイコンがブートストラップパックに含まれていないことに気付きました!! 封筒のアイコンは正常に機能していましたが..
お役に立てれば
これは、上記の回答をサポートする公式ドキュメントです。
アイコンのフォントの場所を変更する Bootstrap は、アイコンのフォント ファイルが、コンパイル済みの CSS ファイルに対して相対的な ../fonts/ ディレクトリにあると想定します。これらのフォント ファイルを移動または名前変更することは、次の 3 つの方法のいずれかで CSS を更新することを意味します。Less コンパイラが提供する相対 URL オプションを利用します。コンパイルされた CSS の url() パスを変更します。特定の開発設定に最適なオプションを使用してください。
これ以外に、新しいユーザーが行う間違いは、公式 Web サイトからブートストラップ zip をダウンロードした後です。彼らは、開発セットアップでコピーするために fonts フォルダーをスキップする傾向があります。そのため、欠落しているフォントフォルダーもこの問題につながる可能性があります
他の人が指摘したように、カスタマイザーにはいくつかの問題があります。
グリフィコンも表示されないという問題と、ナビゲーションバーのレイアウトの問題がありました。
私は提案を使用し、完全な zip からフォントをアップロードするか、カスタマイズされたバージョンからフォントを上書きし、アイコンの問題を修正しました。
また、CDN からのローカル コピーの代わりに、CDN CSS と JavaScript を取り込みました。これにより、ナビゲーションバーの問題が修正されました。
したがって、Bootstrap のコツをつかむまでは、カスタマイズされたバージョンを使用しないことをお勧めします。