擬似要素の Font Awesome 5 がアイコンではなく四角形を表示する

Question

Font Awesome アイコンを含む span のコンテンツを CSS ページから直接変更しようとしていますが、機能しないようです。

1) ドキュメントと

から FA をインポートしました。 リーリー

2) 私の HTML は次のようになります:

リーリー

3) 次に、アイコンのある範囲のコンテンツを CSS ページから直接変更したいとします。

私の CSS は現在次のようになりますが、機能せず、アイコンの代わりに四角形が表示されます。

リーリー リーリー

興味深いことに、いくつかのアイコンが使用されているようです。 content: 'f007'; でテストすると、機能します。なぜなのかご存知ですか？

(なぜ CSS で直接アイコンを変更するのか疑問に思っている方は、メディア クエリを使用しているため、HTML ページにアイコンを直接追加できないためです)

Answer 1

コメントより:

レンダリングを薄くするために、透明色 text-lines を使用してテストします:

リーリー リーリー

Answer 2

^{JS SVG バージョン を使用している場合は、以下をお読みください: JS SVG バージョンを使用すると、Font Awesome 5 が空で四角く表示されます}##追加する必要があります

フォントウェイト: 900

リーリー リーリー