Font Awesomeでどうやっても疑似要素が□になるのはfont-faimlyの使い分けだった

これまで感覚的にFont Awesomeを使っていて
::after::beforeの疑似要素において、
どうやってもアイコンが表示されない問題に直面しました。

超単純なことで解決できたのでシェアします。

結論

最初に結論からいうと、
font-familyの指定を、ブランドアイコンと分けずに使っていたのが原因でした。

通常アイコンのfont-family指定:

font-family: "Font Awesome 5 Free";

ブランドアイコンのfont-family指定:

font-family: "Font Awesome 5 Brands";

完成形

::after {
	position: absolute;
	content: "\f36f";
	top: 0;
	left: 0;
	font-size: 10px;
	font-family: "Font Awesome 5 Brands";
	font-weight: normal;
}

通常アイコンとブランドアイコン見分け方

通常アイコンの方ではサイト右側に4種のスタイルが出てきます。
ブランドアイコンの場合は出てきません。

通常アイコンの場合

 「タイトル」をクリック

ブランドアイコンの場合

 「タイトル」をクリック

その他の対処法3つ

正常に表示されない場合の対処法を他にいくつか紹介します。

その1:CSSをちゃんと読み込めているか

まずはヘッダーに正しくCSSを呼び出せているか確認しましょう。

CDN

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css" integrity="sha384-KA6wR/X5RY4zFAHpv/CnoG2UW1uogYfdnP67Uv7eULvTveboZJg0qUpmJZb5VqzN" crossorigin="anonymous">

最新版はこちらから確認できます。(※サインアップが必要です)
https://fontawesome.com/account/cdn

CSSダウンロード

こちらをクリックしてダウンロード

最新版はこちらからダウンロードできます。(※サインアップが必要です)

https://fontawesome.com/download

その2:PRO版のアイコンを設定していないか

Pro版は有料ですので契約している方のみ使えます。

Free版で使えるアイコンはこちら
https://fontawesome.com/icons?d=gallery&m=free

その3:font-weightが正しく指定できているか

FREE版の場合は、400か900のみで指定します。

ここを見ればどのウエイトにすればいいかがわかります

 「タイトル」をクリック

スタイル(4種) Free版 / Pro版 font-weight
Solid Style Free版 / Pro版 900
Brands Style Free版 / Pro版 400
Regular Style Pro版のみ 400
Light Style Pro版のみ 300

まとめ

以上です。
他の方法で解決した方はぜひ共有してください。

コメントを残す