ブートストラップアイコンが表示されない理由-ブートストラップのチュートリアル-php.cn

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

(*-*)浩

リリース： 2019-07-19 13:27:50

オリジナル

4844 人が閲覧しました

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 サイトの他の関連記事を参照してください。