ブートストラップフォントのアイコン（Glyphicons）

この章では、フォントのアイコン（Glyphicons）を説明し、いくつかの例は、その使用方法を理解します。 ブートストラップフォント形式は、200以上のグリフにバンドルされています。 まず、私たちは最初のフォントのアイコンであるかを理解しましょう。

フォントのアイコンは何ですか？

フォントのアイコンは、Webプロジェクトで使用されるアイコンフォントです。 が、 Glyphiconsのハーフリングは商用ライセンスが必要ですが、あなたはこれらのアイコンを使用し解放するためにブートストラッププロジェクトに基づいてすることができます。

感謝のアイコンの作者を発現させるために、私はあなたが使用中にリンクGLYPHICONSサイトを追加したいと考えています。

フォントのアイコンを取得します。

私たちは持っている環境にインストール章は、ブートストラップ3.xバージョンをダウンロードし、そのディレクトリ構造を理解しています。 フォントではフォルダアイコンには、次のこれらのファイルが含まれているフォントを見つけることができます。

• glyphicons-ハーフリング-regular.eot
• glyphicons-ハーフリング-regular.svg
• glyphicons-ハーフリング-regular.ttf
• glyphicons-ハーフリング-regular.woff

ファイル内のdistフォルダのcssフォルダbootstrap.cssとブートストラップ・min.cssで書かれた関連CSSルール。

フォントのアイコン一覧

利用可能なフォントのアイコンの一覧を表示するには、ここをクリックしてください。

ルールのCSSの解釈

次のCSSルールはglyphiconのクラスを構成しています。

@フォントの顔{
  フォントファミリ： 'Glyphiconsハーフリング';
  SRC：URL（ '../フォント/ glyphicons-ハーフリング-regular.eot'）;
  SRC：URL（ '../フォント/ glyphicons-ハーフリング-regular.eot #iefix？'）フォーマット（「埋め込みOpenTypeの '）は、url（' ../フォント/ glyphicons-ハーフリング-regular.woff '）形式（ 「WOFF '）は、url（' ../フォント/ glyphicons-ハーフリング-regular.ttf '）形式（' TrueTypeの '）は、url（' ../フォント/ glyphicons-ハーフリング-regular.svg＃のglyphicons_halflingsregular '）形式（ 'svg'）;
}

.glyphicon {
  位置：相対;
  トップ：1pxは、
  表示：インラインブロック;
  フォントファミリ： 'Glyphiconsハーフリング';
  -webkit-フォントスムージング：アンチエイリアス。
  フォントスタイル：ノーマル;
  フォント重量：ノーマル;
  行の高さ：1;
  -moz-OSX-フォントスムージング：グレースケール。
}

だからフォント-face規則は、実際にはglyphicons宣言フォントファミリと場所を見つけるための場所です。

.glyphiconクラスは、文のフォント、フォントスタイルの引当金およびフォントの太さが正常である、1に行の高さを設定し、インラインブロックとしてレンダリング1pxのの先頭からのオフセットの相対位置を、宣言します。 また、-webkit-フォントスムージングの使用：アンチエイリアスと-moz-OSX-フォントスムージング：グレースケールは、クロスブラウザの一貫性を得ます。

そして、ここで、

.glyphicon：空の{
  幅：1EM。
}

空glyphicon。

200クラス、アイコンの各クラスがあります。 次のようにこれらの共通フォーマットのクラスは次のとおりです。

.glyphicon-キーワード：{の前に
  内容：「hexvalue ";
}

たとえば、次のようにユーザアイコンは使用するが、それがクラスです。

.glyphiconユーザー：前{
  内容：「\のE008」。
}

使用法

アイコンを使用するには、次のコードを使用します。 アイコンとテキストの間の適切なスペースを保管してください。

<スパンクラス= "glyphicon glyphicon-検索"> </ span>の

次の例では、フォントのアイコンを使用する方法を示します。

結果は以下の通りであります：

ナビゲーションバーでフォントのアイコン

カスタムフォントのアイコン

我々は、我々は、フォントのアイコンをカスタマイズする方法を見て、フォントのアイコンを使用する方法を見てきました。

我々は、フォントサイズを変更することにより、上記の例を開始色、アイコンをカスタマイズするテキストシャドウを適用します。

ここでは、コードが始まりです。

<ボタンタイプ= "ボタン"クラス= "BTN BTN-プライマリBTN-LG」>
  <スパンクラス= "glyphicon glyphiconユーザー"> </ span>のユーザー
</ボタン>

次のような効果があります

カスタムフォントサイズ

アイコンのフォントサイズを増加または減少させることにより、あなたはアイコンを大きくしたり小さく表示させることができます。

<ボタンタイプ= "ボタン"クラス= "BTN BTN-プライマリBTN-LG"スタイル= "フォントサイズ：60PX">
  <スパンクラス= "glyphicon glyphiconユーザー"> </ span>のユーザー
</ボタン>

カスタムフォントの色

<ボタンタイプ= "ボタン"クラス= "BTN BTN-プライマリBTN-LG"スタイル= "色：RGB（212、106、64）;">
  <スパンクラス= "glyphicon glyphiconユーザー"> </ span>のユーザー
</ボタン>

テキストの影を適用します。

<button type="button" class="btn btn-primary btn-lg" style="text-shadow: black 5px 3px 3px;">
  <span class="glyphicon glyphicon-user"></span> User
</button>

オンラインカスタムフォントのアイコン

フォントのアイコンをカスタマイズするには、ここをクリックしてください>>

アイコンリスト