Font Awesome 5で表示されないときの対処方法

最近知ったFont Awesome。
こんなすごいものがあったなんて！
これでいちいちアイコンを探さなくてもいいんだなと感動！

使い方は簡単に言うと

Font Awesome公式サイトのStart For Freeからメールを登録して、アカウントを登録して使います。

https://fontawesome.com/

で、使いたいサイトのヘッダ内に下記を貼り付けたら、あとはFont Awesomeのサイトのフリーアイコンから使いたいものを探して、タグを貼り付ければオッケー。

<script src="https://kit.fontawesome.com/bcf2a56426.js" crossorigin="anonymous"></script>

詳しい使い方などは「font awesome 使い方」などで検索してください。

コリス

2021年最新版、Font Awesome アイコンの使い方と便利な機能のまとめ Font Awesome アイコンの基本的な使い方をはじめ、Webサイトやスマホアプリでアイコンを使う時の便利な機能をまとめて紹介します。 Font Awesome guide and useful

ある時、葉っぱのアイコンを使おうと思ったら表示出来なくって、いろいろ調べてみたらこのページを参考に表示されるようになりました。

<i class="fas fa-leaf"></i>

https://www.genius-web.co.jp/blog/cat-101/font-awesome5-resolution.html

どうやら各アイコン毎に分類されているものとそうでないものがあるようです。

分類されているものは以下の4種類でアイコンに指定された分類に従って、font-weightをcssで指定してあげないといけないようです。

ただ、この分類の記載されていないアイコンもあるので、これは指定しなくても表示できました。これはバージョンによるものなのか分かっていません。ご存じの方がいたら教えて下さい。