エンジニアでもこれなら安心！？ 非デザイナーに必須の組み合わせ Bootstrap + Font Awesome を使ってみた

１．Bootstarpのみの実装例

ここからダウンロード後、以下のように使用する。
ここでは今話題のbootstrap3ではなく（まだ使ったことないので）2.x系を使用した例とする。

トップ画面のダウンロードボタンではv3.0のダウンロードが始まる。

v2.x系のダウンロードページも用意されている。

以下のように記述する。

<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">

<button class="btn btn-large btn-normal">HOME</button>
<button class="btn btn-large btn-primary">DOWNLOAD</button>
<button class="btn btn-large btn-danger">CAUTION</button>
<button class="btn btn-large btn-info">CART</button>

すると、こんな感じに出来上がる。これだけでも十分キレイですが文字情報だけで少し直感的にわかりにくい気がします。

２．Font Awesomeのみの実装例

以下のように記述する。

<link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">

<i class="icon-home"></i>  HOME
<i class="icon-download-alt"></i> DOWNLOAD
<i class="icon-warning-sign"></i> CAUTION
<i class="icon-shopping-cart"></i> CART

すると、こんな感じに出来上がる。

３．Bootstrap + Font Awesome 組み合わせの実装例

以下のように記述する。

<link href="bootstrap/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="font-awesome/css/font-awesome.css" rel="stylesheet" type="text/css">

<button class="btn btn-large btn-normal"><i class="icon-home"></i>  HOME</button>
<button class="btn btn-large btn-primary"><i class="icon-download-alt"></i> DOWNLOAD</button>
<button class="btn btn-large btn-danger"><i class="icon-warning-sign"></i> CAUTION</button>
<button class="btn btn-large btn-info"><i class="icon-shopping-cart"></i> CART</button>

すると、こんな感じに出来上がる。

やはりボタン上に文字だけが表示されるのより、アイコンもあったほうが、ユーザーは直感でわかると思います。
FontAwesomeはアイコンなのにフォントであるため、周囲のフォントサイズやカラーに適合してくれるので、アイコンを画像として配置するときみたいにCSSによる位置調整なんかは不要で、とてもラクです。