最近知ったFont Awesome。
こんなすごいものがあったなんて！
これでいちいちアイコンを探さなくてもいいんだなと感動！
使い方は簡単に言うと
Font Awesome公式サイトのStart For Freeからメールを登録して、アカウントを登録して使います。
で、使いたいサイトのヘッダ内に下記を貼り付けたら、あとは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で指定してあげないといけないようです。
| 分類 | 説明 | font-weight | 接頭語 |
| SOLID | 通常アイコン | 900 | fas |
| REGULAR | アウトラインを取ったようなもの | 400 | fas |
| LIGHT | 線が細いもの | 300 | fas |
| BRANDS | Twitterなどのブランドロゴ | 400 | fas |
ただ、この分類の記載されていないアイコンもあるので、これは指定しなくても表示できました。これはバージョンによるものなのか分かっていません。ご存じの方がいたら教えて下さい。
