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

エンジニアにとって、webサービスや社内webシステムを作るときに毎回苦労するのが「デザイン」ですが、最近はBootstrapやBootMetro、PureなどのCSS フレームワークが普及したおかげで、デザイン面での苦労を味わう機会が減った方も多いのではないでしょうか。

わたしも、社内webシステムではもっぱらBootstrapを多用していたのですが（多少カラーを変えたりしながら）、これだけではどこか味気ないとずっと思っていたので、今回、以前より耳にしていたFontAwesomeを組み合わせてみました。この２つの組み合わせでグッと見栄えがよくなることに気付いたのでメモを残します。

現場でかならず使われている CSSデザインのメソッド

Amazon

１．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による位置調整なんかは不要で、とてもラクです。