BootstrapのアイコンGlyphiconsとFontAwesomeの使い方

Glyphiconsとは?

Bootstrapでは、初期設定でGlyphiconsというアイコンが用意されていて、特に自分で設定することなく、簡単にBootstrap側で用意してくれている画像を利用することができます。

基本的な使い方

基本的に下記のコードを掲載するだけです。 例えばのようなりんごのアイコンを利用したい場合は、

アイコンのサイズ・大きさを指定

スタイルシートで個別にフォントサイズを指定することで大きさを変更できます。 例えば、先ほどのりんごの画像を大きくしたい場合は、 とすると、 のようになります。

文字と一緒に使う時は?

単純に横に並べるだけです。
例えば、
りんご
と表示したい場合は、

とするだけです。

アイコンリスト・種類は公式サイトで確認できる!

アイコンのリストは下記のページで確認できます!

http://getbootstrap.com/components/

追記:Font Awesomeを使う!

Glyphiconsのほうが手軽に使えてよかったのですが、使える画像の種類が限られているため、使える画像の種類が500種類を超えている「Font Awesome」についても紹介したいと思います!

使い方は簡単!header.phpのheadエリアに下記のCSSのリンクを追加!

追記する位置は、bootstrap.min.cssより下にしてください!例えばこんな感じ。

もし、BootstrapをのCDNを利用する場合は「https:」をつけてheadエリアに追記してください。

FontAwesomeのバージョンは?

ここでは、「font-awesome/4.7.0」となっていますが、下記のページで最新版のリンクを確認できます!

あとはGlyphiconsとほぼ同じ!

画像を載せたい場所に下記のコードを掲載するだけです。

「fa-home」とするとが表示されます。

アイコン画像の確認はこちら