【失敗時】

【成功時】

【コーディング詳細】
・font awesome：ver5.11.2を使用

【原因詳細】
font awesomeには、さまざまなバージョンがあります。
その中で私は、font awesomeのver5.11.2を使用して開発しています。
(2023/11/11時点では、ver6.4.2が最新)

バージョンが異なることで、下記２つに変化が出ます。

1.CSS CDNリンクのバージョン
2.iconのiタグのclass名

（私の場合は、このリンクは正しかったです。）

ちなみにCDNのリンクは、fontawesome pro（有料）でないと使えません。
リンクとしては、下記のようなリンクをheadタグに書きます。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">

（これを直したら、正しく表示されました）

fontawesomeは、バージョンによってclass名が異なります。

fontawesomeでは、バージョンによって使用できるiconが異なるため
ユーザは自分でバージョンを選択することができます。

表示のバージョンで、barアイコンの例にすると
class名は下記のような違いがあります。
・ver6.4.2

<i class="fa-solid fa-bars"></i>

・ver5.15.4

<i class="fas fa-bars"></i>

書き方が少し異なるのがわかるかと思います。

【結論】
私の場合、CDNのバージョンに合うiconのバージョンを選択して
iタグをコピーしなかったことで、正しく表示されませんでした。

font awesaomeを使用しているのに
正しくiconが表示されず困っている方は
上記２つを確認してみてください。