CDNのバージョンとiconのバージョンが異なることが原因。
【失敗時】
【成功時】
【コーディング詳細】
・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名
1.CSS CDNのリンク
（私の場合は、このリンクは正しかったです。）
ちなみにCDNのリンクは、fontawesome pro（有料）でないと使えません。
リンクとしては、下記のようなリンクをheadタグに書きます。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.11.2/css/all.css">
2.iconのiタグのclass名
（これを直したら、正しく表示されました）
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が表示されず困っている方は
上記２つを確認してみてください。