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 使い方」などで検索してください。

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

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

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

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

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

分類説明font-weight接頭語
SOLID通常アイコン900fas
REGULARアウトラインを取ったようなもの400fas
LIGHT線が細いもの300fas
BRANDSTwitterなどのブランドロゴ400fas

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

この記事を書いた人

tegecat

Webや動画の製作、PCに関することを仕事にしています。また、トレイルランニングや野菜づくり、料理なども楽しんでいます。