はてなブログでFont Awesomeを使う

今回デザインをリニューアルするにあたって前々から気になっていたFont Awesomeを使った。
サイズ的に重くなり過ぎないか心配だったけど思ったより大丈夫そう。

文字コードや`font-family`を意識しなくても使える

前知識として「Web Fontでアイコンを表示するライブラリ」という認識だったので、font-familyとそれに対応したUnicodeとかを照らし合わせながら::before擬似要素とそのcontentを使って一々文字コードと格闘するものだと勝手に思っていた。
ところが実際に公式ページの使用法を見ていくと、もっと簡単に使用できるように工夫されていてタグとそれに付けたクラスを元に自動的にアイコンが表示されるような仕組みになっている。

具体的には、タグ*1に振られたクラスを元にその::before擬似要素にcontentやfont-family等のスタイルをfont-awesome.css内で適用する事で実現している。

基本的な使い方

準備

<head>内に下記のコードを貼るなどしてfont-awesome.cssを読み込む

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

.faクラスをタグに振る。
.fa-searchとか.fa-carみたいなクラスを追加すると色んな種類のアイコンを表示出来る。
他にも.fa-lgを追加するとみたく大きくなったり、
.fa-fw（おそらくfix widthの略）を追加すると以下のようにアイコンの幅を揃えられる。
- .fa-fwなし
 - 
 - 
 - 
- .fa-fwあり
 - 
 - 
 -

はてなブログ内で使う

まず、記事内で使用する分には普通の使い方で問題ないです。

記事の中ではなく、タイトルとかサイドバーとかコメント部分に使用するには、JavaScriptであとからタグを無理やりねじ込むか、前述した::before等の擬似要素に自分でfont-familyと文字コードを適用して実現する必要があります。
ここでは自分でfont-familyとcontentを設定する方法を説明します。

Font Awesomeでfont-awesome.cssをダウンロードする。
Iconsページで使いたいアイコンの名前をチェックする。
エディタでfont-awesome.cssを開いて、2. で調べたアイコンの名前を検索する。contentプロパティの文字コードを調べる例：.fa-external-linkの文字コードは\f08e
例えば<a class="example">...</a>要素の手前にアイコンを表示したい場合はa.example::baforeセレクタに以下のようなスタイルを適用する。

a.example::before {
    font-family: FontAwesome;
    content: "\f08e"; /* 3. で調べた文字コード　*/

    /* 必要に応じて他のスタイルも設定 */
    font-size: 12px;
    color: #555;
    display: inline-block;
    line-height: 14px;
}

記事内で使用することはまったく考えてなかったけど結構便利かも。

*1:これは別に他のタグでもクラスさえ振ってあればアイコンは表示される