ブログやホームページを作成するとき、メニューやナビゲーションをわかりやすくしたり、デザインをカスタマイズするためにアイコンを使うことがあると思います。素材サイトから無料でダウンロードした画像で装飾をしますが、欲しい大きさがなかったり違う色が使いたかったりと、結構手間がかかったりします。
そんな雑務を解決するのが「アイコンフォント」です。アイコンフォントはテキストなので、大きさの拡大・縮小、色の変更などを CSS からカスタマイズすることができます。アイコンなのに文字と同じように扱えるということです。フォントなのでテキストとのベースラインも合わせやすく、ベクターデータなので画像と違って大きくしてもギザギザになりません。
当ブログでも使っております。
今回は、数あるアイコンフォントの中でもっとも有名な「Font Awesome」の使い方を解説してみたいと思います。
準備
HTML の <head> ～ </head> の間で Font Awesome を読み込ませる必要があります。
CDN の場合
Font Awesome は CDN で利用することができます。これは、ページを表示させるたびに毎回 Font Awesome のサーバーにアクセスし、アイコンフォントを入手する方法です。自分のサーバーにファイルをアップロードする手間が省けます。まずは、こちらのリンクにアクセスしてください。
この部分の HTML ソースをコピーし、<head> ～ </head> の間にペーストします。
ファイルをアップロードする場合
自分のサーバーに Font Awesome のファイルをアップロードし、それを読み込む方法です。Font Awesome のサーバーがダウンしても影響を受けることがありません。ファイルの大きさは 1MB ちょっとしかありませんので、アップロードの時間もそれほどかからないと思います。こちらのリンクからダウンロードします。
Font Awesome, the iconic font and CSS toolkit
ZIP ファイルがダウンロードされるので、解凍した後に使用する HTML ファイル内に移動します。今回は「css」というフォルダを作成し、その中に移動しました。一部の必要なファイルだけ移動すれば動作するのですが、下手にフォルダの構成を変更すると font-awesome.min.css を修正しなければならないので、解凍したものをそのまま突っ込んでおいたほうが無難です。
<head> ～ </head> の間に link 要素を使って、次の一文を追記してください。
1 | <link rel="stylesheet" type="text/css" href="./css/font-awesome-4.4.0/css/font-awesome.min.css"> |
使い方
まずは、こちらのリンクにアクセスします。
欲しいアイコンをクリックします。
このソースコードをコピーし、HTML ファイルの表示したい場所にペーストします。
例えば次のように使います。
1 2 3 4 5 6 7 8 | <ul> <li><i class="fa fa-folder-open-o"></i>ウォッカ</li> <li><i class="fa fa-hand-paper-o"></i>ピロシキ</li> <li><i class="fa fa-bookmark"></i>ボルシチ</li> <li><i class="fa fa-caret-square-o-right"></i>ビーフストロガノフ</li> <li><i class="fa fa-comments-o"></i>キャビア</li> <li><i class="fa fa-database"></i>ペリメニ</li> </ul> |
i タグを空タグで使用しています。構造的に意味がない HTML ソースなので、嫌う人もいるようですね。class 属性の「fa」は Font Awesome アイコンの基本的な表示が設定されているもので、「fa-○○○」の部分が各アイコンに割り振られたクラス名になっています。
こうなります。
アイコンフォントは文字と同じ扱いなので、こんなカスタマイズも可能です。
1 | <i class="fa fa-folder-open-o" style="font-size:16px;color:red;"></i> |
同じ幅で表示する
各アイコンは幅を統一して作成されていないので、リストなどで縦に並べて使おうとすると、文字の始まる位置がバラバラで見栄えが悪くなります。
「fa-border」オプションで枠線を表示するとよくわかります。
1 2 3 4 5 6 7 8 | <ul> <li><i class="fa fa-border fa-folder-open-o"></i>ウォッカ</li> <li><i class="fa fa-border fa-hand-paper-o"></i>ピロシキ</li> <li><i class="fa fa-border fa-bookmark"></i>ボルシチ</li> <li><i class="fa fa-border fa-caret-square-o-right"></i>ビーフストロガノフ</li> <li><i class="fa fa-border fa-comments-o"></i>キャビア</li> <li><i class="fa fa-border fa-database"></i>ペリメニ</li> </ul> |
アイコンを同じ幅で表示するオプション「fa-fw」があるので、これを設定してあげると、
1 2 3 4 5 6 7 8 | <ul> <li><i class="fa fa-fw fa-border fa-folder-open-o"></i>ウォッカ</li> <li><i class="fa fa-fw fa-border fa-hand-paper-o"></i>ピロシキ</li> <li><i class="fa fa-fw fa-border fa-bookmark"></i>ボルシチ</li> <li><i class="fa fa-fw fa-border fa-caret-square-o-right"></i>ビーフストロガノフ</li> <li><i class="fa fa-fw fa-border fa-comments-o"></i>キャビア</li> <li><i class="fa fa-fw fa-border fa-database"></i>ペリメニ</li> </ul> |
幅が統一されてきれいに表示されます。枠線が必要ないのであれば、「fa-border」を削除してください。
1 2 3 4 5 6 7 8 | <ul> <li><i class="fa fa-fw fa-folder-open-o"></i>ウォッカ</li> <li><i class="fa fa-fw fa-hand-paper-o"></i>ピロシキ</li> <li><i class="fa fa-fw fa-bookmark"></i>ボルシチ</li> <li><i class="fa fa-fw fa-caret-square-o-right"></i>ビーフストロガノフ</li> <li><i class="fa fa-fw fa-comments-o"></i>キャビア</li> <li><i class="fa fa-fw fa-database"></i>ペリメニ</li> </ul> |
アイコンフォントと文字との間隔が狭いようでしたら、アイコンの右側にマージンを設定してあげるとよいでしょう。
1 2 3 | .fa-fw { margin-right: 5px; } |
大きさを変更する
設定できる大きさのオプションは5つあります。
- fa-lg：約1.33倍
- fa-2x：2倍
- fa-3x：3倍
- fa-4x：4倍
- fa-5x：5倍
1 2 3 4 5 6 7 8 | <ul> <li><i class="fa fa-folder-open-o"></i>ウォッカ</li> <li><i class="fa fa-lg fa-hand-paper-o"></i>ピロシキ</li> <li><i class="fa fa-2x fa-bookmark"></i>ボルシチ</li> <li><i class="fa fa-3x fa-caret-square-o-right"></i>ビーフストロガノフ</li> <li><i class="fa fa-4x fa-comments-o"></i>キャビア</li> <li><i class="fa fa-5x fa-database"></i>ペリメニ</li> </ul> |
回転させる
「fa-spin」オプションを設定すると、アニメーションによりアイコンが回転します。WordPress のテーマなどで、ソーシャルメディアでの拡散のために SNS ボタンを設置することがあると思いますが、シェア数を受信中にこのアイコンがくるくる回っているのを見たことがあるのではないでしょうか。
1 | <i class="fa fa-spin fa-spinner"></i>fa-spinner |
fa-spin さえ設定すれば、どんなアイコンでも回転させることができますが、fa-spinner に関しては、fa-spin ではなく「fa-pulse」オプションにすると8フレームで1回転するアニメーションになります。こちらのほうが待機中の雰囲気にあっているかも。
角度を指定する
設定できる角度のオプションは３つあります。
- fa-rotate-90：90度
- fa-rotate-180：180度
- fa-rotate-270：270度
1 2 3 4 5 6 | <ul> <li><i class="fa fa-google-plus"></i></li> <li><i class="fa fa-rotate-90 fa-google-plus"></i></li> <li><i class="fa fa-rotate-180 fa-google-plus"></i></li> <li><i class="fa fa-rotate-270 fa-google-plus"></i></li> </ul> |
反転させる
- fa-flip-horizontal：水平方向に反転
- fa-flip-vertical：垂直方向に反転
1 2 3 4 5 | <ul class="test"> <li><i class="fa fa-apple"></i></li> <li><i class="fa fa-flip-horizontal fa-apple"></i></li> <li><i class="fa fa-flip-vertical fa-apple"></i></li> </ul> |
:before、:after 要素を使う
「空タグは HTML ソース的に嫌だな」という人は、:before 要素などでデザインのカスタマイズをすることをおすすめします。私もこちらのほうが好みです。例えば、このようなページでメニューの先頭にアイコンフォントを表示してみます。
こちらから HTML のテンプレート素材を頂きました。
ネットマニア – テンプレート・素材・PHP・CGI・クールサイトを作る為に –
メニューの HTML ソースは次のようになっています。
1 2 3 4 5 6 | <DIV id="menu"> <A href="/index.html">メニュー１</A> <A href="/index.html">メニュー２</A> <A href="/index.html">メニュー３</A> <A href="/index.html">メニュー４</A> </DIV> |
各アイコンのページには「Unicode」というものがあるので、これを使います。
今回使用するユニコードは「f02b」です。CSS ファイルに次のように記述します。
1 2 3 4 | #menu a:before { font-family: 'FontAwesome'; content: '\f02b'; } |
ユニコードをエスケープするのを忘れないでください。次のように表示されます。
テキストと同じように扱えるので、大きさや色の変更も簡単です。
1 2 3 4 5 6 7 8 | #menu a:before { font-family: 'FontAwesome'; content: '\f02b'; font-size: 20px; color: #ff0000; margin-right: 5px; } |
Comment