Font Awesome 5 Free を疑似要素で使う方法と高速化のヒント

2018/11/20
2018/12/09

概要

SNS のアイコンなどを文字のように色を変えたり劣化させずに拡大縮小したい時に役に立つものにアイコンフォントがあります。
アイコンフォントは、ここ数年の SNS の浸透で特に浸透してきたように思います。

そんなアイコンフォントの中でも無料で使えて種類が非常に豊富な「Font Awesome 5」(Free 版) について解説します。
基本的な使い方は既に色々な情報がありますので、ここでは疑似要素での使用方法と CSS 読み込みの高速化をハックしていきましょう。

基本的な使い方と導入方法

「Font Awesome 5」を使用するには CDN から読み込むかフォントデータ等をダウンロードして使用する2つの方法があります。
また、SVG を使った方法もありますが疑似要素で高速化まで考えた時には実装が大変そうなのでフォントデータを読み込む方法のみとします。
(SVG を使う場合は Javascript で SVG 要素を追加することで表示しています)

詳細はこちらのブログ記事をご参照下さい。 → 文字のように扱えるアイコンフォント「Font Awesome 5」の導入と疑似要素で表現する時の注意点

CDNから読み込んで使う方法

まずは、非常に簡単に使う方法は、以下のコードを <HEAD> ～ </HEAD> タグ内に追加します。
たったこれだけで使い始めることができます。便利で簡単ですね。
・Font Awesome 公式 - Start a New Project

上記を追加するだけで、公式サイトにある表示用の HTML コードを表示したい箇所に貼り付けるだけで使用できます。
(表示用コード例： )

上記のコードを貼り付けると「」と表示されます。
もちろん通常の文字と同じように色を変えたり ()、大きさを変えたり () が自由にできます。

Webフォントをダウンロードして使う方法

上記方法ほど手軽ではありませんが、オフラインでの確認ができたり、CDN より高速化ができたり^※と自由度が高い方法です。
以下の解説ではこちらのダウンロードする方法を使います。
※高速化には高速なサーバや CSS の読み込み方法の工夫も必要です。なので場合によっては CDN の方が早いこともあります。

ダウンロードして使う場合には以下のページからファイル一式の ZIP ファイルをダウンロードして解凍します。
・Font Awesome 公式 - Hosting Font Awesome Yourself

この中から使うものは "css/" と "webfonts/" ディレクトリの2つだけです。
これら2つをサーバにアップロードして "css/all.css" を読み込めば CDN と同じように使用することができます。

疑似要素で表示する方法

疑似要素で表示するには少し注意が必要ですので、以下に解説します。
CDN でもダウンロードでも使い方は同じです。

contentにはエスケープ"\"を付ける

「Font Awesome」は通常の文字と同じように文字コードが割り振られており、その文字コードにアイコンなどを登録した書体を使うことで実現しています。
その為、疑似要素でアイコンを表示するには "content" プロパティに文字コードを指定します。
文字コードは公式サイトの各アイコンページに記載があります。以下のように "f***" というものです。

文字コードが確認出来たら content プロパティの値にセットするのですが、この時に確認した値をそのまま使うことはできません。
通常の文字でないことを表す為に先頭にエスケープ文字 "\" (円マークやバックスラッシュで表示されます) を追加して値に入れます。
例）文字コード：f0a4 → contentプロパティ値：\f0a4

span.righthand::before{ content : '\f0a4'; /* 値は'や"で囲む */ /* これだけでは表示されませんので下記注意点もご確認下さい */ }

font-familyには'Font Awesome 5 Free(Brands)'を指定する

上記でも書きましたが、アイコンは文字コードに対応したものを指定の書体から表示しています。
なので書体にアイコンフォント専用のものを指定する必要があります。
この書体は「Font Awesome 5」では2種類ありちょっと分かりにくいです。

基本的には "Font Awesome 5 Free" という書体名を使います。
ロゴマークなどは "Font Awesome 5 Brands" という書体になります。

これを見分けるポイントは、公式サイトの各アイコンページにある タグの class を見ます。
fas / far / fab の3種類あるので以下にまとめます。

class名	font-family
far	Font Awesome 5 Free
fas	Font Awesome 5 Free
fab	Font Awesome 5 Brands

公式サイトの Hosting Font Awesome Yourself (英語) にも記載があるのでもう少し詳しく、という方はリンク先を確認して下さい。

span.righthand::before{ content : '\f0a4'; /* 値は'や"で囲む */ font-family : 'Font Awesome 5 Free'; /* 使うアイコンによっては「Font Awesome 5 Brands」になる */ /* これだけでは表示されないアイコンをあるので下記注意点もご確認下さい */ }

font-weightは400か900にする

最後に一番わかりにくい文字の太さについてです。
これも書体と同じくクラス名を確認して以下設定として下さい。

class名	font-weight
far	400
fas	900
fab	400

良く使うアイコンは "fas" が多いと思うので、太字に変更していないと表示されないということがあります。
特に見出しタグ (H1～H6) は標準スタイルで太字 (font-weight : bolder) になっているので見出しにアイコンフォントを使っていて <H*> タグの文字太さを調整すると表示されなくなる、ということが発生します。

span.righthand::before{ content : '\f0a4'; /* 値は'や"で囲む */ font-family : 'Font Awesome 5 Free'; /* 使うアイコンによっては「Font Awesome 5 Brands」になる */ font-weight : 400; /* 400と900で異なるアイコンが設定されている文字コードもある */ /* この3つを揃えておけば表示される */ }

設定の要点まとめとサンプル

細かいことはいいからまとめておけよ、という意見もあると思いますので設定だけまとめます。
公式サイトの各アイコンページにある タグの表示用コードのクラス名と照らしわせて設定を決めて下さい。

class名	content	font-family	font-weight
far	\f***	Font Awesome 5 Free	400
fas	\f***	Font Awesome 5 Free	900
fab	\f***	Font Awesome 5 Brands	400

例1） 　↓ .comment-icon::before{ content : '\f075'; font-family : 'Font Awesome 5 Free'; font-weight : 400; } 例2） 　↓ .share-icon::after{ /* 疑似要素はbegore/afterのどちらでも使える */ content : '\f1e0'; font-family : 'Font Awesome 5 Free'; font-weight : 900; } 例3） 　↓ .twitter-icon::before{ content : '\f081'; font-family : 'Font Awesome 5 Brands'; font-weight : 400; }

例1）コメント
例2）シェア→
例3）twitter

高速化のヒント

上記で疑似要素を使った表示ができました。
しかし、ここまで解説してきた方法だと使わないアイコンを表示する為のコードが含まれていたり読み込むファイルが増えることになるので高速表示の妨げになったりします。
そこで、必要な記述だけ他の CSS と合わせる方法を紹介します。

アイコンフォント用のフォントを読み込む

まずはアイコンフォントで使用するフォントだけを読み込むように設定しましょう。
far / fas / fab それぞれが1つずつのフォントファイルを使いますので必要なものだけ使います。
※以下の記述をしても font-family で指定されるまでは読み込まれないようです。使い勝手を考えて、この部分は全て残しても良いです。

/* class="far" 用 */ @font-face{ font-family : 'Font Awesome 5 Free'; font-style : normal; font-weight : 400; src : url('./style/fontawesome5free/webfonts/fa-regular-400.eot'); src : url('./style/fontawesome5free/webfonts/fa-regular-400.eot?#iefix') format('embedded-opentype'), url('./style/fontawesome5free/webfonts/fa-regular-400.woff2') format('woff2'), url('./style/fontawesome5free/webfonts/fa-regular-400.woff') format('woff'), url('./style/fontawesome5free/webfonts/fa-regular-400.ttf') format('truetype'), url('./style/fontawesome5free/webfonts/fa-regular-400.svg#fontawesome') format('svg'); } /* class="fas" 用 */ @font-face{ font-family : 'Font Awesome 5 Free'; font-style : normal; font-weight : 900; src : url('./style/fontawesome5free/webfonts/fa-solid-900.eot'); src : url('./style/fontawesome5free/webfonts/fa-solid-900.eot?#iefix') format('embedded-opentype'), url('./style/fontawesome5free/webfonts/fa-solid-900.woff2') format('woff2'), url('./style/fontawesome5free/webfonts/fa-solid-900.woff') format('woff'), url('./style/fontawesome5free/webfonts/fa-solid-900.ttf') format('truetype'), url('./style/fontawesome5free/webfonts/fa-solid-900.svg#fontawesome') format('svg'); } /* class="fab" 用 */ @font-face{ font-family : 'Font Awesome 5 Brands'; font-style : normal; font-weight : normal; src : url('./style/fontawesome5free/webfonts/fa-brands-400.eot'); src : url('./style/fontawesome5free/webfonts/fa-brands-400.eot?#iefix') format('embedded-opentype'), url('./style/fontawesome5free/webfonts/fa-brands-400.woff2') format('woff2'), url('./style/fontawesome5free/webfonts/fa-brands-400.woff') format('woff'), url('./style/fontawesome5free/webfonts/fa-brands-400.ttf') format('truetype'), url('./style/fontawesome5free/webfonts/fa-brands-400.svg#fontawesome') format('svg'); }

これを他の CSS を記述しているファイルに追加すればアイコンフォントが使用できるようになります。
こうすることで読み込むべきファイルが減り、不要なアイコン用の CSS も不要になるので軽量化が期待できます。
Ver5.5.0 の "css/all.css" は約 63kB もある (空白や改行を削除した "css/all.min.css" でも 51kB) ので画像1枚分程度の軽量化になります。
効果が小さいと思われるかもしれませんが、モバイルファーストと言われる現代では通信環境が悪い状況も考慮して少しでも軽量化するのは大事です。
仮に通信制限されているスマホからアクセスする場合には最大速度の128kbpsだとしてもおよそ3.9秒も改善できることを意味します。

軽量化はできましたが、 タグでの表示はできないので疑似要素等で直接文字コードを指定して表示する必要があります。
もしくは、直接 HTML に文字コードを埋め込むことも可能です。
直接 HTML に書く場合は、特殊文字と同様に "&" から書き始めて ";" で終わりますので、"&#xf***;" とします。

＜CSS＞ .fa5-regular{ font-family : 'Font Awesome 5 Free'; font-weight : 400; } ＜HTML＞ A「良いアイデア思いついたよ」
B「やったね」

A「良いアイデア思いついたよ」
B「やったね」

まとめ

以上「Font Awesome 5 Free」を疑似要素で表示させる方法と高速化のヒントでした。

アイコンフォントには「Font Awesome」以外にも色々あるので、興味があれば調べてみて下さい。