これは便利！BootStrapで使えるアイコン（Glyphicon）

BootStrapはCSSやJavaScriptだけじゃなく、なんと標準のアイコンも用意されているんです。その名もグラフィコン（Glyphicon）。以下のぺージから確認できます。それほど多くはありませんが、Webページでよく使うものはだいたい揃っています。

http://getbootstrap.com/components/

[ad#top-1]

まずは単純に表示させてみる

まずは単純にGlyphiconを表示させてみましょう。完成イメージはこんな感じです。

Glyphiconを表示させるためには<i>タグを使います。ソースは以下の通り。ちなみに&nbsp;はスペースを意味するエスケープ文字です。

 

ボタンに実装する

次にボタンに実装します。面白いことにGlyphiconって背景色によって文字とともに白抜きになるんです。画像を白黒２種類用意しているのかな。

で、ボタンを実装する場合のソースは以下の通りです。<button>タグで<i>タグを囲う感じですね。

 

アプリのボタンバーのようにする

ちょっとオマケですが、ボタンをbtn-groupでグループ化して、アイコンだけ表示させると、アプリケーションのボタンバーのようになります。

ソースは以下の通りです。

 

最後に全体のソースを公開

最後にこれがソースコード全体です。BootStrapの何がスゴイって、ほとんどHTMLタグだけで実現してしまうことなんですよね。

[ad#ad-1]

 - BootStrap