FontAwosomeのアイコンが表示されない理由

Question

FonAwsomeのTwitterアイコンが表示されない原因が分かりません。
Twitterのアイコンを表示させようと思い<span class="fab fa-twitter" title="Twitter"></span>としたのですが、□マークが表示されるだけでtwitterアイコンは表示されませんでした。
色々調べた結果font-familyの指定でFreeが必要とのことでしたので、下記のような指定をしたのですが、表示されることはありませんでした。

<style>
      .fab{
        font-family: "Font Awesome 5 Free";
      }
      .fa-twitter{
        font-family: "Font Awesome 5 Free";
      }
      .fa-twitter::before{
        font-family: "Font Awesome 5 Free";
        font-weight:400;
      }
    </style>

Twitterのアイコンは無料で使用できるはずなのですが、アイコンが表示できない理由が分からないため、解決法につきまして、ご助言頂ければ幸いです。
追記です。
FontAwesomeのCSS読み込み部分になります。
FontAwosomeに登録した際のコードなのですが、「.js」の前の部分は表示してもよい部分か分からなかった為、「000」としています。

<script src="https://kit.fontawesome.com/000.js"></script>

Comments

[45_Shingo]

念のために確認なんですが、FontAwesomeのCSS読み込みはされてますか？
もしされているのであれば、CSS部分の記述も追記をお願いします。

[aae_11]

FontAosomeの読み込みは行っております。
CSS読み込みの部分、追記いたしました。

Answer 1

FontAwesomeのCSS読み込みが正しく行われているのであれば、.fab等に個別CSSでFont-Familyを指定する必要はありません。

むしろ、この記述のせいで表示されなくなっています。

.fabのfont-familyは

"Font Awesome 5 Free"

ではなく

"Font Awesome 5 Brands"

が正しい（Font Awesome Brandsの頭文字でfab）ので、その部分を個別CSSで書き換えてしまっているため□が表示されてしまっているのではないでしょうか。

font-family部分だけ記述を消して表示してみてください。

Comments

[aae_11]

ご回答ありがとうございます。
個別に設定していた、Font-Familyを消去しましたら、表示されました。
色々、調べて試していたのですが、逆に色々と試している内にこんがらがってしまっていたといった感じでした...