Bootstrap Glyphicons はどのように機能しますか? 質問する

Question

Bootstrap 2.x では、Glyphicons は画像メソッド (質問で述べたように画像を使用する) を使用しました。

画像方式の欠点は次のとおりです。

アイコンの色を変更できませんでした
アイコンの背景色を変更できませんでした
アイコンのサイズを大きくできなかった

そのため、Bootstrap 2.x のグリフィコンの代わりに、そのような制限のない SVG アイコンを使用する Font-awesome を使用する人が多くいました。

Bootstrap 3.x では、Glyphicons はフォントメソッドを使用します。

フォントを使用してアイコンを表すと、画像を使用する場合よりも利点があります。

スケーラブル - クライアントデバイスの解像度に関係なく適切に動作します
CSSで色を変えることができます
従来のアイコンで可能なすべての操作を実行できます (例: 不透明度の変更、回転など)
ストローク、グラデーション、影などを追加できます。
テキストに変換（合字付き）
合字はスクリーンリーダーによって読み上げられる
アイコンをフォントに変更するのは、CSSのフォントファミリーを変更するのと同じくらい簡単です。

アイコンのフォントメソッドで何ができるか見てみましょうここ。

Bootstrap ディストリビューションでは、グリフィコンフォントファイルを確認できます。

fonts\glyphicons-halflings-regular.eot
fonts\glyphicons-halflings-regular.svg
fonts\glyphicons-halflings-regular.ttf
fonts\glyphicons-halflings-regular.woff

Bootstrap CSS は glyphicon フォントを次のように参照します。

@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');
}

CSS は.glyphicon基本クラスを使用してこのフォントにリンクします ( に注意してくださいfont-family)。

.glyphicon {
  position: relative;
  top: 1px;
  display: inline-block;
  font-family: 'Glyphicons Halflings';
  font-style: normal;
  font-weight: normal;
  ...
}

そして、各グリフィコンは、個別のアイコンクラスを使用して、UnicodeリファレンスGlyphicon Halflings フォント内、例:

.glyphicon-envelope:before {
  content: "\2709";
}

このため、Bootstrap 3 では、要素に対して基本.glyphiconクラスと個別のアイコンクラスの両方を使用する必要があります。span

<span class="glyphicon glyphicon-envelope"></span>

Answer 1