【WordPress】Font Awesome 5の使い方【CSSの::before】

こんにちは、mickです。

Font Awesomeの使い方がわからない
Font Awesomeの4.7と5があるのはなぜ？違いは？
Font AwesomeをCSS（::before）での使い方を知りたい

こんな疑問を解決していきます。

Font Awesome を使うHTMLやCSSのサンプルソースコード付きです。

Font Awesome は無料のアイコンWebフォント
Font Awesome 5 の使い方（4.7も紹介）
- HTMLで Font Awesome を使う
- CSSの擬似クラス（::before）でFont Awesomeを使う
まとめ。

Font Awesome は無料のアイコンWebフォント

Font Awesome は無料で使うことができるアイコンのWebフォントです。

最新バージョンは、Font Awesome 5.14。
前のバージョンは、Font Awesome 4.7。

記事では Font Awesome 5 で統一しています。

WordPressテーマCocoonはデフォルトで使える

Font Awesome を使うには、事前に設定が必要です。
⇒ Font Awesome を始める（公式サイト）

ところが、WordPressテーマCocoonなら事前の設定は不要。
HTMLやCSSを書くだけですぐに使えます。

Cocoon便利すぎ。

アイコンの種類が7000種類以上に爆増したFont Awesome 5

Font Awesome 4.7 では675種類のアイコンでした。
Font Awesome 5 では7848種類のアイコンと10倍以上に増量。

ただし、Font Awesome 5 は有料版を含めての数です。
無料版の Font Awesome 5 Free だと1598種類のアイコンが使えます。
（2020/09/25時点のFont Awesome 5.14）

有料版が増えたことでプレフィックス（faとか）が増えた

Font Awesome 4.7 までのプレフィックスはただ1つ fa だけでした。

これがFont Awesome 5 になってから次の5種類に増えています。

新しいプレフィックス	アイコンスタイル	説明	対象
fab	Font Awesome Brands	AmazonやAppleなどのブランド系アイコン	無料版
fas または fa	Font Awesome Solid	従来のアイコン	無料版
far	Font Awesome Regular	変化のあるアイコン	有料版
fal	Font Awesome Light	空白の多いアイコン	有料版
fad	Font Awesome Duotone	ツートンのアイコン	有料版

Font Awesome 5 で増えた5種類のプレフィックス

アイコンのバリエーションが増えた分、設定も増えたわけです。

Font Awesome 4.7 と Font Awesome 5 の混在はNG

Font Awesome 4.7と Font Awesome 5 を混在はNG。

理由は、Font Awesome 公式に記述があります。
公式の記述を私なりに翻訳してみました。

2つのバージョンは混在させないように。（中略）Font Awesome 4.7が使えるように工夫をしているけれど、大きくなったCSSやアイコンへのアクセスが複雑なこと、そして表示できるかどうかは約束できない。犬とネコを同時に飼うように、まさにそれはカオスな状態だ。
Font Awesome公式「Upgrading from Version 4」翻訳

バージョンアップに手間がかかるのは、Web運営者泣かせ。

Font Awesome 5 の使い方（4.7も紹介）

Font Awesome を使う事前準備ができていれば使うのは簡単です。

ここではCocoonのようにWordPressのテーマに Font Awesome がインストールされているケースで紹介していきます。

Font Awesome を使う方法は2つ。

HTMLで直接使う方法
CSSの擬似クラスで使う方法

HTMLで Font Awesome を使う

Font Awesome を使うひとつ目の方法は、HTMLを直接Webページに貼り付けることです。
大まかな流れはこちら。

公式サイトでアイコンを探す
アイコンに設定してあるHTMLをコピーする
WebページにHTMLを貼り付ける

公式サイトでアイコンを探します。
⇒ Font Awesome 5 のアイコンギャラリー

Font Awesome 5 のアイコンは1000種類以上。
検索を上手に使っていきます。

今回は無料版を使うため、左の絞り込みメニューから「Free」と無料で使える「Solid」を選択。
そして、検索ボックスには「bed」を入力して検索しました。

アイコンに設定してあるHTMLをコピーします。
PROマークが付いているアイコンは、有料版で使えます。
また、アイコンスタイルはこのアイコンの画面で確認ができます。

<i class="fas fa-bed"></i>

ベッドアイコン

WebページにコピーしたHTMLを貼り付けておしまいです。

aria-hidden属性はテキスト読み上げ防止に使う

aria-hidden属性は、Font Awesome のアイコンを装飾で使うときに指定します。

<i class="fas fa-bed" aria-hidden="true"></i>

これは、テキストリーダーが読み上げないようにするための処理。
だから、画面にアイコンを表示するだけなら、あってもなくても影響はありません。

aria-hidden属性を書いてない！と慌てなくても大丈夫。

Font Awesome 4.7 を使う場合

Font Awesome 4.7 のアイコンギャラリーで bed を検索した結果

Font Awesome 4.7 を使う場合は、4.7用のアイコンギャラリーからアイコンを探します。
⇒ Font Awesome 4.7 のアイコンギャラリー

HTMLをコピーしてWebページに貼り付ける点は、Font Awesome 5 のときと同じです。

CSSの擬似クラス（::before）でFont Awesomeを使う

Font Awesome を使うひとつの方法は、CSSの擬似クラス（::before）で使うことです。
大まかな流れはこちら。

公式サイトでアイコンを探す
アイコンに設定してあるUnicodeをコピーする
CSSでFont Awesomeを使うように記述する
WebページでCSSを使う

まずは、HTMLを使うときと同じようにアイコンギャラリーからアイコンを探します。

アイコンギャラリーからアイコンのアイコンスタイルを確認してUnicodeをコピーする

アイコンギャラリーのアイコンの画面で、アイコンスタイルを確認します。
この例では「Solid」です。

そしてUnicodeをコピーしておきます。
この例では「f236」です。

これらを使って、次のようなCSSを記述します。

/* 共通のプロパティ設定 */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
/* Solidアイコンのベッドを使う */
.bed::before {
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  content: "\f236";
}

ポイントは、2つ。font-familyプロパティとfont-weightプロパティです。
この2つの値は、アイコンスタイルによって決まります。

アイコンスタイル	font-familyの値	font-weightの値	対象
Brands	Font Awesome 5 Brands	400	無料版
Solid	Font Awesome 5 Free または Font Awesome 5 Pro	900	無料版
Regular	Font Awesome 5 Pro	400	有料版
Light	Font Awesome 5 Pro	300	有料版
Duotone	Font Awesome 5 Pro	900	有料版

アイコンスタイルによって決まる値

アイコンが思うように表示しないときは、次の3つを確認します。

font-familyの値
font-weightの値
content（Unicode）の値

これらの値がひとつでも間違っていると表示がうまくいきません。

Font Awesome 4.7 をCSS擬似クラスで書く

Font Awesome 4.7 で擬似クラスは次のように書いていました。
Font Awesome 5 との違いは大きく2つ。

Font FamilyがFontAwesomeのみ
font-weightの指定がない

/* バージョンでも共通のプロパティ設定 */
.icon::before {
  display: inline-block;
  font-style: normal;
  font-variant: normal;
  text-rendering: auto;
  -webkit-font-smoothing: antialiased;
}
/* font-familyがFontAwesomeのみで、font-weightの指定がない */
.bed::before {
  font-family: FontAwesome;
  content: "\f236";
}

Font Awesome 5 よりも書くことが少なくてシンプルに見えますね。
しかし、今後のためにも Font Awesome 5 を使うことをオススメします。