bootstrap3でアイコンを使う


Bootstrap3からアイコンがオプションになり、外部の Glyphicons を利用するようになりました。

Glyphicons png のみは無料で、ベクター形式のデータが有償になっています。

Bootstrap3とGlyphiconsを組み合わせて利用するには、glyphicons用のCSSを追加で指定します。

Bootstrap CDN を使用する場合は以下のlinkタグを追加します。
[html]
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-glyphicons.css" rel="stylesheet">
[/html]

これは嘘で、bootstrap-glyphicons.cssを追加しなくても使える。公式にそんな説明ないわけだ。

使い方は、http://getbootstrap.com/components/#glyphiconsで使用したいアイコンの値を確認しクラスに指定します。
[html]
<button class="btn btn-primary" name="add_member"><i class="glyphicon glyphicon-plus"></i> 追加</button>
[/html]
表示結果
glyphicon_glyphicon-plus