Font Awesomeを使っていて、CSSの疑似要素（::before / ::after）のcontentでアイコンを指定したのに、なぜか表示されない――。私も一度これで半日ほど溶かしたことがあります。Unicodeは合っているし、アイコンが古くて入っていないわけでもない。それなのに、いくつかのアイコンだけがぽっかり空白になる。かなり気づきにくい罠なので、同じところで足止めを食っている人向けに、原因と直し方をまとめておきます。
関連記事：FontAwesomeのリンクホバーの下線をテキストだけにする方法
まず疑似要素での基本的な書き方
CSSの疑似要素でFont Awesome 5のアイコンを出すときは、こんな感じで書きます。
a::after {
font-family: "Font Awesome 5 Free";
content: "\f35d";
}contentに入れているのは、アイコンごとに決まっているUnicode値です。ところがこの書き方だと、一部のアイコンだけが表示されない、という現象に出くわします。
原因は font-weight の指定漏れ
結論から言うと、多くの場合の犯人はfont-weightの指定漏れです。Font Awesome 5では、同じcontentのUnicodeでもfont-weightの値によって参照される字形（スタイル）が切り替わる作りになっていて、Solid系のアイコンはfont-weight: 900を指定しないと出てきません。
a::after {
font-family: "Font Awesome 5 Free";
content: "\f35d";
font-weight: 900;
}この1行を足したら、あっさり表示されました。Font Awesome公式のドキュメントでも、疑似要素で使う際は「そのアイコンのスタイルに合った font-weight を指定する」ことが必須と明記されています（Font Awesome Docs: CSS Pseudo-elements）。アイコン詳細ページで「Solid」表記なら900、「Regular」表記なら400、という具合です。
font-family と font-weight の対応表
Font Awesome 5では、アイコンのスタイルごとにfont-familyとfont-weightの組み合わせが決まっています。整理するとこうなります。
| スタイル | font-family | font-weight | 接頭辞 |
|---|---|---|---|
| Solid | "Font Awesome 5 Free" | 900 | fas |
| Regular | "Font Awesome 5 Free" | 400 | far |
| Brands | "Font Awesome 5 Brands" | 400 | fab |
ポイントは、無料版で使えるのはSolid・Regular・Brandsの3つで、font-familyが2種類に分かれていること。TwitterやFacebookといったブランド系ロゴは"Font Awesome 5 Brands"を、それ以外は"Font Awesome 5 Free"を指定します。Light（fal）などは有料のProプランのフォント（"Font Awesome 5 Pro"）が必要なので、無料版で指定しても出ません。当時「Pro に変えたら表示された」と書いていたのはこのあたりの混乱で、正しくはSolidにfont-weight: 900を付けるのが本筋です。
Webフォント版でないと疑似要素は使えない
もう一つよくハマるのが、読み込み方式の問題です。Font Awesomeには「Webフォント＋CSS」の版と「SVG＋JavaScript」の版があり、疑似要素のcontentで使えるのはWebフォント版だけです。SVG+JS版は<i>タグを実際のSVG要素に置き換える仕組みなので、contentにUnicodeを入れても何も起きません。もし全アイコンが疑似要素で出ないなら、まずこの読み込み方式を疑ってください（公式ドキュメントでもWebフォント版が前提とされています）。
Font Awesome 6ではどう書くか
現行のFont Awesome 6でも考え方は同じで、font-familyの名前がバージョンに合わせて変わります。無料のSolidなら"Font Awesome 6 Free"＋font-weight: 900、Brandsは"Font Awesome 6 Brands"です。
a::before {
font-family: "Font Awesome 6 Free";
font-weight: 900;
content: "\f007";
}さらにv6では、font-familyとfont-weightをまとめて指定できるCSSカスタムプロパティが用意されました。これを使うと指定漏れが起きにくく、書き方もすっきりします。
a::before {
font: var(--fa-font-solid);
content: "\f007";
}--fa-font-solidの中にfont-familyとfont-weightがまとまっているので、スタイルに応じて--fa-font-regularや--fa-font-brandsに差し替えるだけで済みます。v5から移行するなら、この書き方に寄せておくと今回のような「font-weight忘れ」で悩む場面がかなり減ります。
まとめ
疑似要素でFont Awesomeのアイコンが出ないときに確認したいのは、次の3点です。
- スタイルに合った
font-weightを指定しているか（Solidは900、Regular/Brandsは400） - font-familyがスタイルと一致しているか（Brands系は"Font Awesome 5/6 Brands"）
- 読み込みがWebフォント版か（SVG+JS版では疑似要素は使えない）
この3つを押さえておけば、たいていの「一部だけ出ない」問題は片付きます。v6を新規で使うなら、最初からvar(--fa-font-solid)系のカスタムプロパティで書いておくのがおすすめです。
