Font Awesome 5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処方法 | ジーニアスブログ – WEB制作会社ジーニアスウェブのお役立ちブログ
https://www.genius-web.co.jp/blog/design-tips/if-you-specify-font-awesome-5-as-a-css-pseudo-element-how-to-do-this-if-the-icon-is-not-displayed.htmlCSS疑似要素だと表示されるものと表示されないものがありました。
font-weightを以下のように指定しなければいけないようです。
| 分類 | 説明 | font-weight | 接頭辞 (HTMLに記述) |
|---|---|---|---|
| SOLID | 通常アイコン、白抜きのもの | 900 | fas |
| REGULAR | アウトラインをとったようなもの | 400 | far |
| LIGHT | 線が細いもの | 300 | fal |
| BRANDS | Twitterなどのブランドロゴ | 400 | fab |