Font Awesome 5をCSSの疑似要素で指定するとアイコンが表示されない場合の対処方法

Pocket

こんにちは。ジーニアスウェブの杉田です。

花粉との戦いも終息に向かっているので、
ようやく外出がしやすい季節になってきました。
そろそろ、ジョギングの再開をしようと思います。

さて今回は、
昨年いつの間にやらバージョンアップされていた「Font Awesome 5」で、
私がハマった罠の解決方法をご紹介させていただきます。

先日、久しぶりにFont Awesomeを使用しました。
その際に、疑似要素(::before, ::after)にアイコン設定をすると、
一部のアイコンのみなぜか表示されないという現象がおきました。

 

私がハマった罠

例えば、下記のように黒色テキストは疑似要素で指定しているのですが…

See the Pen 20180424-2 by ジーニアスウェブ (@genius-web) on CodePen.0

お問い合わせのアイコンは表示されているのに、ダウンロードアイコンは表示されません…。

しかし、同じダウンロードアイコンでも、赤色テキストの場合は表示されています。
これは、疑似要素ではなく<i class=”fas fa-download”></i>のように、HTMLで指定をしています。

なぜ…???
何がダメなの…???

 

解決方法

ある記述を追加するだけで、下記のようにうまく表示できました!

See the Pen 20180424-3 by ジーニアスウェブ (@genius-web) on CodePen.0

1行だけ記述を追加しましたが、どこの箇所か分かりますか~?

正解は、
a::beforeに記述しているfont-weight: 900;です。

どうやら、各アイコンごとに指定すべき weight があるようです。
その指定すべき weight の違いは、各アイコン詳細ページに記載されています。

「SOLID」となっている場合は、font-weight: 900; の指定がいるようです。
下記がまとめた表です。

分類 説明 font-weight 接頭辞
(HTMLに記述)
SOLID 通常アイコン、白抜きのもの 900 fas
REGULAR アウトラインをとったようなもの 400 far
LIGHT 線が細いもの 300 fal
BRANDS Twitterなどのブランドロゴ 400 fab

詳細は、公式サイト(Define a pseudo-element in CSS)に記載されています(英語なので翻訳してご覧ください…)。

 

さいごに

Font Awesome 5 にバージョンアップしたことで、
基本的な使い方は変わっていませんが、色々な機能が追加されています。
便利になった Font Awesome 5 の使い方は、また改めてご紹介させていただきます。
私は、JavaScript と SVG による描画が増えたことで、アイコン同士を重ねられる方法が気になっています。

それでは、また。