アイコン型Webフォント「Font Awesome」で楽々素敵なリストを作ろう！【Stinger5】

はじめに

「リストをかっこよくしたい！」けど、「画像をいちいち作るのはめんどくさいな…」
そんな時は、アイコン型Webフォントを使ってみてはいかが？

今回紹介するのは「Font Awesome」です。

すっごく簡単に使える上に、フォントの数も479（バージョン4.2.0）と豊富。
ほぼ（よほど特殊なアイコン以外）はそろってるんじゃないかな〜？

IE7に対応させたい人は、旧バージョンの 3.2.1 を使うといいようです。
旧バージョン 3.2.1 の使用方法（英語）

Step 1

htmlのheadの中に下記コードを記入。Webフォントを呼び出します。

<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

ダウンロードして使うこともできますよ。トップページにダウンロードボタンがあります。http://fortawesome.github.io/Font-Awesome/

Stinger5を使っている人

おめでとうございます。上記コードはすでに「header.php」に埋め込まれています。だから、この行程はすっとばしちゃってください。

Step 2

後は、自分がアイコンを表示したい（html内）箇所に、下記の様なコードを入れます。

<i class="fa fa-camera-retro"></i>

「fa-camera-retro」の部分は、自分の選んだアイコン名に変更。

Iconsページに一覧が掲載されています。（下図参照）

「Examplesページ」にはオプションの設定方法が記載されています。大きさも変更することができますよ！

<i class="fa fa-camera-retro fa-lg"></i>

上記コードの「fa-lg」の部分を先程の基本形に追加すれば、文字のサイズが大きくなります。他のサイズは「Examplesページ」を参照してください。

htmlをさわらず、CSSの疑似要素で制御したい

htmlをさわらずに、cssのみだけで何とかならんかなぁ〜？って方、オッケーです。

特にwordpressを使っていたら、htmlを書き換えるのは面倒ですよね。
疑似要素で制御しちゃいましょう。

li:before {
	font-family: 'FontAwesome';
	content:"\f013";/* アイコンのユニコード */
	margin-right :3px;/* アイコンと要素のマージン */
	}

アイコンのユニコード確認方法

「Iconsページ」＞ アイコン一覧から好きなアイコンを選択 ＞ クリックすると各アイコンの個別ページにとびます。

上記画像の赤枠のところがユニコードです。

contentの中に、ユニコードの始まりを示す「¥」、そして調べたユニコードを書けば出来上がり。

「¥」は円マークに見えたり、バックスラッシュに見えたりしますが、これはフォントに依存します。