Bootstrap-glyphicons

ブートストラップ-グリフィコン

この章では、グリフィコン、その使用、およびいくつかの例について説明します。 ブートストラップには、200個のグリフがフォント形式でバンドルされています。 グリフィコンとは何かを理解しましょう。

グリフィコンとは何ですか？

グリフィコンは、Webプロジェクトで使用できるアイコンフォントです。 Glyphicons Halflingsは無料ではなく、ライセンスが必要ですが、作成者は無料でBootstrapプロジェクトで利用できるようにしています。

'_「ありがたいことに、実用的な場合はGLYPHICONSへのオプションのリンクを含めることをお勧めします」 —ブートストラップドキュメント_

グリフィコンはどこにありますか？

Bootstrap 3.xバージョンをダウンロードし、リンク：/bootstrap/bootstrap_environment_setup [Environment Setup]の章からそのディレクトリ構造を理解したので、glyphiconsは_fonts_フォルダー内にあります。 これには、次のファイルが含まれています-

• glyphicons-halflings-regular.eot
• glyphicons-halflings-regular.svg
• glyphicons-halflings-regular.ttf
• glyphicons-halflings-regular.woff

関連するCSSルールは、_dist_フォルダーのcssフォルダー内の_bootstrap.css_および_bootstrap-min.css_ファイル内に存在します。 利用可能なグリフィコンは、次のリンクで確認できます：/bootstrap/bootstrap_glyph_icons [GLYPHICONS]。

使用法

アイコンを使用するには、コードのほぼどこでも次のコードを使用します。 適切なパディングのために、アイコンとテキストの間にスペースを残します。

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

次の例はこれを示しています-

<p>
   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes"></span>
   </button>

   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-attributes-alt"></span>
   </button>

   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order"></span>
   </button>

   <button type = "button" class = "btn btn-default">
      <span class = "glyphicon glyphicon-sort-by-order-alt"></span>
   </button>
</p>

<button type = "button" class = "btn btn-default btn-lg">
   <span class = "glyphicon glyphicon-user"></span>

   User
</button>

<button type = "button" class = "btn btn-default btn-sm">
   <span class = "glyphicon glyphicon-user"></span>

   User
</button>

<button type ="button" class = "btn btn-default btn-xs">
   <span class = "glyphicon glyphicon-user"></span>

   User
</button>