Webアイコンを無料で利用できる「Font Awesome（フォント オーサム）」ですが、コードを設置しても文字化けのような表示になってしまう事があります。
調べてみると、下記のような原因が紹介されています。
・CDNコードの設置ミス
・有料のアイコンを使用している
・「font-family」のコードが間違っている
など。
上記の内容も問題無いのに表示されない場合は、管理画面の設定も確認してみてください。
「Font Awesome」は無料版でもユーザー登録が必要です。
管理画面の使用バージョンを変更
ユーザー登録後に、管理画面の「Settings」をクリックします。
表示されたページをスクロールして「Version」の部分を、最新のバージョンに変更します。
変更後は、保存ボタンをクリックします。
この古いバージョン設定が影響して、アイコンが表示されないケースもありますので、アイコンが表示されない場合は確認してみてください。
合わせて、「Font Awesome kit」を利用する方法と「CSS」で読み込む方法の2パターンもご紹介します。
「Font Awesome kit」を利用するパターン
ユーザー登録後にマイページの「Your Kits」をクリックします。
表示されたページの黄色枠線をクリックします。
次に表示されたページの、赤枠部分のコードを「<head></head>」の間に貼り付けます。
「CSS」で読み込むパターン
「CSS」の場合は、使用するCSSファイル内の最初の方に、下記のコードを貼り付けます。
CSS
@import url('https://use.fontawesome.com/releases/v7.1.0/css/all.css');
「V7.1.0」の部分は使用するバージョンに変更してください。
今後もバージョンアップに伴い、管理画面の設定も見直してみるとよいかと思います。