今回デザインをリニューアルするにあたって前々から気になっていたFont Awesomeを使った。
サイズ的に重くなり過ぎないか心配だったけど思ったより大丈夫そう。
文字コードやfont-familyを意識しなくても使える
前知識として「Web Fontでアイコンを表示するライブラリ」という認識だったので、font-familyとそれに対応したUnicodeとかを照らし合わせながら::before擬似要素とそのcontentを使って一々文字コードと格闘するものだと勝手に思っていた。
ところが実際に公式ページの使用法を見ていくと、もっと簡単に使用できるように工夫されていて<i>タグとそれに付けたクラスを元に自動的にアイコンが表示されるような仕組みになっている。
具体的には、<i>タグ*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クラスを<i>タグに振る。.fa-searchとか.fa-carみたいなクラスを追加すると色んな種類のアイコンを表示出来る。- 他にも
.fa-lgを追加するとみたく大きくなったり、 .fa-fw（おそらくfix widthの略）を追加すると以下のようにアイコンの幅を揃えられる。.fa-fwなし<i class="fa fa-archive"></i><i class="fa fa-bank"></i><i class="fa fa-child"></i>
.fa-fwあり<i class="fa fa-archive fa-fw"></i><i class="fa fa-bank fa-fw"></i><i class="fa fa-child fa-fw"></i>
はてなブログ内で使う
まず、記事内で使用する分には普通の使い方で問題ないです。
記事の中ではなく、タイトルとかサイドバーとかコメント部分に使用するには、JavaScriptであとから<i>タグを無理やりねじ込むか、前述した::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:これは別に他のタグでもクラスさえ振ってあればアイコンは表示される
