ブートストラップアイコンが表示されない理由

bootstrap で導入されている CSS やフォントの仕様に注意しないと、bootstrap でグリフィコンアイコンが正常に表示できずボックス表示される場合があります。

#表示できないことがわかった後、goo cdn のアドレスを使用してブートストラップ ファイルをインポートしたところ、正常に表示できました。したがって、問題はインポートされたファイルで発生するはずです。

ctrl 左クリックして glyphyicon と入力すると、実装されたコードが次のようになっていることがわかります: (推奨される学習:
Bootstrap ビデオ チュートリアル )

@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.woff2') format('woff2'), 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');
}
.glyphicon {
 position: relative;
 top: 1px;
 display: inline-block;
 font-family: 'Glyphicons Halflings';
 font-style: normal;
 font-weight: normal;
 line-height: 1;
 
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
}

@font-face の部分は次のとおりです。アイデア 赤を報告し、プロンプトではファイル glyphicons-halflings-regulator.eot および glyphicons-halflings-regulator.eot を解決できません。これは、ファイルが見つからないことを意味します。

したがって、グリフィアイコン スタイルはこれらのファイルに関連付けられています。ダウンロードした圧縮パッケージ全体を入力し、ファイル bootstrap-3.3.7-dist\fonts を入力すると、次のファイルが見つかります:

したがって、glyphyicon スタイルを通常に使用するには、その前に glyphicons-halflings-regulator.eot などのファイルに関連付ける必要があります。

通常、パスが間違っているためにエラーが発生します。

これだけ分析した結果、フォント アイコン スタイルの実装を glyphyicon 関連ファイルに関連付ける必要があることがわかりました。bootstrap.css ファイルを導入するときは、それを確認する必要があります。 bootstrap.css に関連するものです。相対パスを使用すると、これらの関連ファイルを見つけることができます。公式 CDN サーバーはこのようになっており、アイコンが正常に表示されます。

Bootstrap に関連する技術的な記事については、

Bootstrap チュートリアル 列にアクセスして学習してください。

以上がブートストラップアイコンが表示されない理由の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。