「Font Awesome 5」をCSSの疑似要素などで指定する時にハマったこと

font-weightの指定について

font-weight: 900;じゃないと表示されないってのは、よく書かれていること。

FontAwesome5からはCSSでアイコンを表示する場合に、font-weightも合わせて指定する必要があります。

Solidタイプのアイコンを表示するときにはfont-weight: 900;を、Regularタイプのアイコンを表示するときにはfont-weight: 400;を合わせて書きましょう。

疑似要素：beforeにFontawesomeを表示すると、:hoverで消える。

play-circle を画像の上に重ねた時（重ねるのは、position:ablolute;を使用）画像には:hoverでopacity:0.7;が指定されていて、マウスオン効果を付けていた。

その時、こちらの【保存版】Font Awesomeの使い方：Webアイコンフォントを使おうに書いている通りに、疑似要素のbeforeにFont Awesomeを設定すると、hoverすると消えてしまう。

[HTML]
<p>これは<span class="bomb">爆弾</span>です。</p>

[CSS]
.bomb:before {
  font-family: "Font Awesome 5 Free";
  content: '\f1e2';
  font-weight: 900;
}

その場合は、疑似要素:afterに設定すれば消えないようになった。