[CSS] フォントオーサムが表示されないときに確認したいポイント
バージョン違いの落とし穴
- カッコイイアイコンを手軽に使うことができるFont Awesome（フォントオーサム）ですが、ちょっとした間違いでアイコンが□と表示されたりして「あれ？」となることがあります
- そんなときにチェックするべきポイントをまとめてみました
バージョン5の場合は、font-weightの設定が必要
- 2018年10月時点の最新版である、バージョン5.x.x系のフォントオーサムでは、font-weightを設定しないとアイコンが表示されません
- 「font-weight: 900;」と指定しましょう
- バージョン4系ではfont-weightの設定が不要だったので意外とハマりやすいポイントです
バージョンによってfont-familyの指定が違う
- これまたバージョンによる違いです。4から移行したばかりのときにはつまずきやすいポイントになります
- バージョン4系では「font-family: FontAwesome;」と指定します
- バージョン5系では「font-family: "Font Awesome 5 Free";」と指定します
バージョンによってcontentに指定する値が違う
- これまた（以下略
- 同じアイコンでも、バージョンによって指定するコードが異なる場合があります
- 使用しているバージョンのアイコン仕様を確認して、正確にしてしましょう
フォントオーサムのインクルードができていない
- そもそも、アイコンデータのインクルードパスが繋がっていないと表示されません
- ヘッダーでインクルードを指定しているか、指定しているパスに飛んだときに飛び先が存在しているか、念のため確認しましょう
contentのコードの頭に「\」がない
- 未だによくやります
ご質問など受け付けています
記事の中でわかりにくかったところ、もっと知りたかったこと、間違っていることなど、何でもお気軽にご連絡ください。
ご連絡は下記フォームを利用いただくか、ツイッターアカウント@flat8migi宛てでもOKです。