Font Awesomeのアイコンが疑似要素のcontentで表示されない理由と対策

サンプル

Font Awesomeのアイコンを疑似要素(:beforeや:after)のcontentで表示しようと思っても、上手く表示されず「□(四角形の記号)」になってしまうことがある。

原因はfont-weightの設定をしていないから。

Basic Use – Font Awesome

https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

※Since Font Awesome was first implemented and continues to support being rendered using the CSS @font-face method, each of its styles corresponds to a particular font weight

上記の通り、各アイコンごとに特定のfont-weightに対応しているので、そのfont-weightを設定していないと正しく表示されないとのこと。

具体的な設定方法は以下の通り。

  1. アイコンのページにて「Style」を確認する
  2. 「Style」に対応したfont-weightの値を設定する

左上と右側に「Solid( Style)」の表記あり。
font-weightの設定のバリエーションが1つしかないときは右側は表示されない。

Free Planの場合は、
・Solid(font-weight: 900;)
・Brands(font-weight: 400;)
の2種類しかない。

ソースコード

HTML
CSS

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です