Bootstrap グリフアイコン

❮ 前章へ 次章へ ❯

グリフアイコン

Bootstrap には、グリフアイコン ハーフリングセットから 260 の の glyphicon が組み込まれています。

グリフアイコンは、テキスト、ボタン、ツールバー、ナビゲーション、フォームなどで使用することができします。

下に、グリフアイコンの一部の例を示します:

Envelope glyphicon:

Print glyphicon:

Search glyphicon:

Download glyphicon:


グリフアイコンの構文

グリフアイコンは、次の構文を使用して挿入します:

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

上記構文の name 部分は、適切なグリフアイコン名で置き換えなければなりません。


グリフアイコンの構文

次の例は、グリフアイコンを使用するためのいろいろな方法を示しています:

<p>Envelope icon: <span class="glyphicon glyphicon-envelope"></span></p>
<p>Envelope icon as a link:
  <a href="#"><span class="glyphicon glyphicon-envelope"></span></a>
</p>
<p>Search icon: <span class="glyphicon glyphicon-search"></span></p>
<p>Search icon on a button:
  <button type="button" class="btn btn-default">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Search icon on a styled button:
  <button type="button" class="btn btn-info">
    <span class="glyphicon glyphicon-search"></span> Search
  </button>
</p>
<p>Print icon: <span class="glyphicon glyphicon-print"></span></p>
<p>Print icon on a styled link button:
  <a href="#" class="btn btn-success btn-lg">
    <span class="glyphicon glyphicon-print"></span> Print
  </a>
</p>
Try it Yourself »

練習問題で確認!

Exercise 1 »  Exercise 2 »  Exercise 3 »


完全な Bootstrap グリフアイコン・リファレンス

すべてのグリフアイコンの完全なリファレンスについては、 Bootstrap グリフアイコン・リファレンスをご覧ください。


❮ 前章へ 次章へ ❯