FontAwesomeとは

Webサイト上でフォントと同じように表示することのできるウェブアイコンフォントサービスで、無料で利用できるプランと、有料のPRO（全種類のアイコンが使用できるほか複数のウェイトの指定も可能）プランがあり、現在最新バージョンとしてFontAwesome5がリリースされています。

使用するにはCDN（ざっくり言うとデータストリーミングのようなもの）を利用する方法と、アイコンフォントデータをサイトからダウンロードして、自分のサーバにアップロードして利用する方法があり、個人的には手軽なCDN利用が断然オススメです。
実装方法としては専用のclassでコード指定する方法と、font-family属性で擬似要素として指定する方法がありますが、今回はfont-family属性指定でのトラブル対処法まとめになります。（無料版対象）

１.正しいCSSを読み込んでいない

最新版のCSSが指定できてないなどの原因が考えられます。
新しいバージョンがリリースされると、CSSのアドレスも変更されるので間違った指定でCSSの読み込みをしていないか確認してみましょう。
https://fontawesome.com/start

2.フォントウェイトの指定をしていない

私がハマったのはこれでした。ほぼウェイトの指定は必須のようです。
（つまりウェイトnormalフォントがないということなのでしょう）
FREE版の場合、ウェイトは400（Brands）か900（Solid）のどちらかになりますが、アイコンによって指定が違うので詳細画面で確認してみて下さい。

.icon::before {
font-family: "Font Awesome 5 Free";
font-weight: 900; 　//←ここ！
content: "\f521";
}

3.バックスラッシュが付いていない

contentのunicode指定で"\"を付け忘れていると、表示されないようです。
公式サイトのチートシートや、アイコンの詳細画面などに表示されているコードには"\"が付いていないので要注意です。これも、抜けポイント。

.icon::before {
font-family: "Font Awesome 5 Free";
font-weight: 900; 
content: "\f521";　//←ここ！
}

4.フォントの指定が正しくない

当たり前ですが、font-familyの指定が正しく出来ていないと表示されません。でもって、落とし穴なのが最後に必ずFREEと付けなきゃいけない点。
あと、フォント名を""（引用符）で囲うのも忘れずに！

.icon::before {
font-family: "Font Awesome 5 Free";　//←ここ！
font-weight: 900; 
content: "\f521";
}

5.FREE版にはないアイコンを指定している

アイコンにはPRO版でしか使用できないものもあるので、目的のアイコンがFREE版で使用できるものか一覧から確認してみましょう。https://fontawesome.com/icons?d=gallery&m=free