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

Font Awesome 5

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

  • Brands
  • Regular
  • Solid

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

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

font-family: 'Font Awesome 5 Brands';

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

font-family: 'Font Awesome 5 Free';

と書くのだが、、、

例えば、

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

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

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

クラス名 格納されてるファイル
.fab Brands
.far Regular
.fas Solid

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

もし、従来(Font Awesome 4)と同じように

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

↑ このように書くと

plus-square(black) ← こいつが表示される(他のフォントでは表示されないものもある)。

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

では、Regular の plus-square(white) ← こいつを表示させるにはどうすれば良いか?

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

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

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

なので、

plus-square(white) ← これを表示したい場合は、↓ こう。

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

plus-square(black) ← これを表示したい場合は、↓ こう。

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

IT・ICT

Posted by るな