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

f:id:kojikoji75:20150804230518j:plain

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

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

f:id:kojikoji75:20130907164219j:plain

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

作者: 北川貴清,窪木博士,KLEE Atelier*Spoon,小浜愛香,佐々木恵,棧敷友香子,錦織幸知,前川昌幸,山川祐一郎
出版社/メーカー: エムディエヌコーポレーション
発売日: 2013/09/25
メディア: 単行本
この商品を含むブログを見る

１．Bootstarpのみの実装例

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

トップ画面のダウンロードボタンではv3.0のダウンロードが始まる。
f:id:kojikoji75:20130907164300j:plain

v2.x系のダウンロードページも用意されている。
f:id:kojikoji75:20130907164312j:plain

以下のように記述する。

<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>

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

２．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

すると、こんな感じに出来上がる。
f:id:kojikoji75:20130907164512j:plain

３．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>

すると、こんな感じに出来上がる。
f:id:kojikoji75:20130907164523j:plain

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