Font Awesome 5 Free を擬似要素(before・after)の content で表示する時は font-weight を 400 か 900 かを明示しないとアカン

2018年4月5日

Font Awesome のバージョンが 4 から 5 になって、フォントファイルが以下の3つに分けられることになった。

なので、CSS で Font Awesome を利用する場合、

Brands のフォントを利用する時は

font-family: 'Font Awesome 5 Brands';

Solid か Regular のフォントを利用する時は

font-family: 'Font Awesome 5 Free';

と書くのだが、、、

例えば、

フォント	クラス名	文字コード	格納されてるファイル
	.plus-square	\f0fe	Regular
	.plus-square	\f0fe	Solid

上の2つのフォントはクラス名も文字コードも同じである。

よって、HTML で記述する場合は、従来（Font Awesome 4）の書き方と少し異なり、.fab .far .fas というクラスを並記してフォントを識別する。

では、CSS の擬似要素 ::before もしくは ::after を使って記述する場合はどうか？

もし、従来（Font Awesome 4）と同じように

#hogehoge::before {
	font-family: "Font Awesome 5 Free";
	content: "\f0fe";
}

↑ このように書くと

← こいつが表示される（他のフォントでは表示されないものもある）。

なぜなら、Font Awesome 5 の CSS では Solid のフォントファイルの読み込み記述の方が後ろに書かれてるので、Solid が優先されるからである。

では、Regular の ← こいつを表示させるにはどうすれば良いか？

答えは font-weight を指定すれば良い。

なぜなら、Font Awesome 5 のフォントファイルはそれぞれ以下のようになってるから。

フォトファイル	font-weight
Regular	400
Solid	900

なので、

← これを表示したい場合は、↓ こう。

#hogehoge::before {
	font-family: "Font Awesome 5 Free";
	content: "\f0fe";
	font-weight: 400;
}

← これを表示したい場合は、↓ こう。

#hogehoge::before {
	font-family: "Font Awesome 5 Free";
	content: "\f0fe";
	font-weight: 900;
}

Posted by るな