Bootstrapのアイコンの色をカラフルにする方法こんにちは、@9ensanです。Webサイトを作る際、「TwitterBootstrap」を利用している方も多いかと思います。Bootstrapの中で、利用することが可能な「Icons」これが画像ファイルで作成されている為に色を変更する事が容易ではありません。Bootstrapの3.0からiconはfontになるよ」と書かれていたので3.0からは色を自由にスタイルシートで変更できるようになるみたいです。今すぐに変更したい場合困ります。いうことで、今のIcon画像をWebFontに変更する手順を紹介します。今回使用するWebFontは「FontAwesome」です。Bootstrapに利用されているIconのFontは全部揃っています。Bootstrap」のページを開いて「Customize」ボタンを押下して「Customizeページ」を開きます。Customページが開いたら「Icons」のチェックボックスを外します。Download」ボタンを押下してダウンロードします。ダウンロードが終了したら解凍します。(Customを使用すると「bootstrap-responsive.css」が、なぜか入ってこないので必要な場合は別途全部入りの「Bootstrap」からコピーして下さい。3.0」ボタンを押下して「Awesome」をダウンロードします。ダウンロードが終了したらファイルを解凍します。「Bootstrap」のフォルダに、「FontAwesome」のfontフォルダとcssフォルダをコピーします。imgフォルダから不必要なファイルの削除imgフォルダからIcon表示用に使用している「glyphicons-halflings-white.png」と「glyphicons-halflings.png」の2つのファイルを削除します。これで準備は完了です。利用方法index.htmlをbootstrapのフォルダに作成します。この時、以下の記述でWebFontの「FontAwesome」を有効にしています。href="css/font-awesome.min.css">実際に動作させた結果がこちらです。色の変更や、フォントサイズの変更で柔軟にアイコンを変更できるようになっているのが分かるかと思います。Bootstrapの3.0が出るまでの間の場つなぎですが、自由にアイコンの色やサイズを変更できると便利になると思いますので、一度試してみてはいかがでしょうか。0返信をキャンセルする。「たった一行でブラウザをシンプルなメモ帳に変える方法」が気に入ったのですこしだけ便利にしてみました。INFORMATION最近、Arduinoに興味あります。