FontAwesomeを使いこなしたい

本サイトはこちら↓
https://fontawesome.com/

See the Pen wvBvRLr by ryo (@ryo0613) on CodePen.

HTMLだけで 横幅揃え、アニメーションができるとはΣ(・□・;)
知らなかった…

See the Pen MWYWRav by ryo (@ryo0613) on CodePen.

これが今まで、度々表示されないことがあり困ってました。
なぜか四角になってしまう…

・CDN or ローカルファイルの読み込み
・font-familyの指定
・font-weightの指定

先駆者様たちのサイトを巡ってチェックポイントを見てみたけど、
いや全部満たしてる….なんで…??

原因判明。CDNのバージョン。

読み込んでいるバージョンが古かったようです。
https://use.fontawesome.com/releases/v5.11.2/css/all.css
ちなみに今現在(2019/12/3)バージョンは5.11.2のよう。

fontawesomeのトップページ、もしくは各アイコンのバージョンもアイコンの各ページで確認可能。

↓参考にさせていただいたサイト様。
HTML,CSS共にとてもわかりやすいです

Font Awesome 5の使い方とカスタマイズ方法を徹底解説!

おすすめ