公式 Font Awesome

V5ぐらいからなんかメール登録しろとかなんだとか面倒なことになってるので。

これで OK

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

といってもとりあえずなので、登録して JavaScript でロードするほうを本番では使ったほうがいいです。

before とか after とかの疑似要素でも使えるのだが v5 あたりから指定が変わってきたので

基本的にこのように指定する。

#hoge::after {
  font-family: "Font Awesome 5 Free";
  content: "\f054";
  font-weight: bold
}

content の指定は今まで通りだが font-family の指定とか使う文字によっては bold 指定が必要だったりとか 900, 600, 400 のような値を指定する必要がある。

フォントや使う Font Awesome によっては Free ではなく Font Awesome 5 Pro とか Font Awesome 5 Brands のように指定する必要がある場合もある。

こういうものは、先ず使いたいアイコンを <i> のタグで表示しておいて、そのタグの before に当たっているスタイルをブラウザで確認すれば目当てのスタイルがわかる。