Webサイト上にアイコンを表示させるために「Fontawesome」というWebアイコンフォントを使っている人も多いかもしれません。
しかし、いざ使ってみるとアイコンが□のような表示になってしまって正常に表示されないことがあります。そこで、この記事では、Fontawesomeを利用している際にWebサイト上に正常にアイコンが表示されない場合の原因と対処法を紹介します。
Fontawesomeを利用していると突然起こりがちなトラブルなので、対処法をしっかり覚えておきましょう。
この記事の内容
アイコンフォントが正常に表示されない原因
- CSSを読み込む際にエラーが発生している
- アイコンフォントの指定ミスを始めとするコードの記述ミス
- コードを挿入する場所を間違っている
基本的に、Fontawesomeで正常にコードが表示されない場合はコードの記述ミスがほとんどです。
特にコードを記述する位置が間違っていたり、font-familyの指定を間違えていたりすることが多いので、これから紹介する対処法をチェックして1つずつ確認してみてください。
対処1: headタグ内にKitコードが記述されているかを確認する
Fontawesomeを利用するためには、HTMLのheadタグ内に指定されたコードが記述されている必要があります。
記述すべきkitコードは次の公式ページから取得してください。
コードは基本的に以下のようなものです。
<script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script>
このコードをheadタグ内に記述します。ミスを防ぐためにはの前に記述するのがいいでしょう。正常に記述できると次のようになるはずです。
<head> <!-- Place your kit's code here --> <script src="https://kit.fontawesome.com/xxxxxxxxxx.js" crossorigin="anonymous"></script> </head>
Kitコードが正しく記述されていることを確認したら次に進みましょう。
対処2: Pro版のアイコンフォントを利用したい場合は有料契約する
Fontawesomeに存在しているアイコンフォントには、無料でも使えるFree版と有料契約しないと使えないPro版があり、有料契約していない状態でPro版のアイコンフォントを設定しても表示されません。
したがって、Pro版のアイコンを利用したい場合はスタンダードプランを契約してください。Fontawesomeの契約は次のページから行えます。
Pro版アイコンの見分け方
このようにアイコンページを表示した場合、アイコン名の後ろに「Pro」と書かれているものを利用する場合は有料契約が必要です。
Free版のアイコンなのに正常に表示されない場合、また有料契約してもPro版のアイコンが表示されない場合はコードの記述ミスの可能性が高いといえます。
対処3: コードにミスがないかをチェックする
次にコードにミスがないかをチェックし、問題がある場合は修正します。ミスが発生しやすいポイントは以下の通りなので、注意深く確認してください。
基本となるコードは以下の通りです。
icon::after {
font-family: "Font Awesome 5 Pro";
font-weight: 900;
display: inline-block;
content: "\f640";
}必要に応じてfont-styleやfont-bariantなどを追加しますが、最低限の記述として上記のコードを覚えておいてください。
ポイント1: font-familyの指定
最初にfont-familyの指定をチェックしてください。Free版を利用している場合は"Font Awesome 5 Free"と記述し、Pro版の場合は"Font Awesome 5 Pro"と記述します。
FreeとProの記述を忘れがちなので十分に注意してください。
ポイント2: font-weightの指定
font-weightの指定は契約種別や使用するアイコンによって指定すべき値が異なります。
基本的にFree版の場合は900(solid)か400(brands)なので、一度確認してください。Pro版の場合は300(Light)など他の値が加わるので、こちらも要チェックです。
アイコンによっても利用できるfont-weightが異なり、400のみのものや900のみのものなどもあります。
ポイント3: 単純なミスタイプ
コードを記述する際にミスタイプをしているということもあるので一度確認してください。
セミコロン(;)の記述忘れやダブルクォーテーションマーク(")での囲み忘れなどがよくあるので注意深くチェックしましょう。
対処4: HTMLファイルに直接記述している場合は個別に確認する
HTMLファイルに直接コードを記述する場合は、各コードの上部にある以下のようなコードを挿入します。
<i class="fad fa-abacus"></i>
こちらもコードにミスタイプがあると正常に表示されないので、ミスタイプを防止するためにもアイコンページ上部にあるコードをコピペすることをオススメします。