Twitter Bootstrapのアイコンの色をカラフルにする方法

こんにちは、@9ensanです。

Webサイトを作る際、「TwitterBootstrap」を利用している方も多いかと思います。
そのTwitter Bootstrapの中で、利用することが可能な「Icons」これが画像ファイルで作成されている為に色を変更する事が容易ではありません。

以前、Twitter BootstrapのIssueでも「Twitter Bootstrapの3.0からiconはfontになるよ」と書かれていたので3.0からは色を自由にスタイルシートで変更できるようになるみたいです。

ですが、今すぐに変更したい場合困ります。ということで、今のIcon画像をWebFontに変更する手順を紹介します。
今回使用するWebFontは「FontAwesome」です。
Twitter Bootstrapに利用されているIconのFontは全部揃っています。

それでは手順です。

「Twitter Bootstrap」のページを開いて「Customize」ボタンを押下して「Customizeページ」を開きます。

Customページが開いたら「Icons」のチェックボックスを外します。

チェックボックスを外したら、一番下にある「Customize and Download」ボタンを押下してダウンロードします。

ダウンロードが終了したら解凍します。

（Customを使用すると「bootstrap-responsive.css」が、なぜか入ってこないので必要な場合は別途全部入りの「Bootstrap」からコピーして下さい。）

次に、「FontAwesome」のページを開いて「Download Font Awesome 3.0」ボタンを押下して「Awesome」をダウンロードします。

ダウンロードが終了したらファイルを解凍します。

「Bootstrap」のフォルダに、「FontAwesome」のfontフォルダとcssフォルダをコピーします。

imgフォルダからIcon表示用に使用している「glyphicons-halflings-white.png」と「glyphicons-halflings.png」の２つのファイルを削除します。

これで準備は完了です。次は利用方法です。

index.htmlをbootstrapのフォルダに作成します。

この時、以下の記述でWebFontの「FontAwesome」を有効にしています。

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

実際に動作させた結果がこちらです。

色の変更や、フォントサイズの変更で柔軟にアイコンを変更できるようになっているのが分かるかと思います。

Bootstrapの3.0が出るまでの間の場つなぎですが、自由にアイコンの色やサイズを変更できると便利になると思いますので、一度試してみてはいかがでしょうか。

9ensanのLifeHack