Font Awesomeの設定をちゃんとしているのに、AFFINGER専用ブロックで表示されないWebアイコンがある…
・・・なんで？
という疑問に答えます。
結論からいうと、Font Awesomeのバージョンが古いことが原因です。
対策としては、
- 「Kit'sコード」を使用している場合
- 「CDNコード」を使用している場合
それぞれやり方が異なります。
それぞれ詳しく解説していきます。
「Kit'sコード」を使用している場合
まずは、「Kit'sコード」を使用していて、特定のWebアイコンが表示されないときの対策を解説します。
「Kit'sコード」は、「script」で挟む以下のようなコードです。
冒頭でも書いたように、特定のWebアイコンが表示されない原因は、Font Awesomeのバージョンが古いことが原因です。
このバージョンは、Font Awesomeのマイページにある設定で変更できます。
それでは手順を解説していきます。
Font Awesomeのアカウントをまだ作っていない方は先にアカウント作成を行ってください。
Font Awesomeにサインインする
Font Awesome のトップページを開きます。
※トップページのリンクはこちら↓
→ https://fontawesome.com/
右上にあるサインインのアイコン（ ）をクリック。
登録しているメールアドレスとパスワードを入力しサインインします。
マイアカウントの「設定」を開く
サインインするとトップページに「 Your Kits 」というボタンが出現しているので、それをクリック。
次に設定アイコン（ ）をクリックし設定を開きます。
バージョンを最新に変更する
設定の中に「Version」という項目があります。
このバージョンが「Latest 5.x」になっている場合は、最新の「Latest 6.x」に変更しましょう。
最後に「 Save Changes 」をクリックし変更を保存します。
「6.x」にしておくことで、常にリリースされた最新バージョンのWebアイコンが使用できます。
イメージ
これで最新バージョンのWebアイコンが、AFFINGER専用ブロックでも使用できるようになっているはずです。
「CDNコード」を使用している場合
次に、「CDNコード」を使用していて、特定のWebアイコンが表示されないときの対策を解説します。
「CDNコード」は、「link」ではじまる以下のようなコードです。
※以下のページでCDNコードの確認ができます。
→ https://fontawesome.com/account/cdn
特定のWebアイコンが表示されない原因は、Font Awesomeのバージョンが古いことが原因です。
CDNコードの場合は、コードの中に記載されているバージョン番号を変更すれば問題は解決します。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css"（これより右は省略）赤文字の「v6.1.1」がバージョン番号です。
Webアイコンが表示されない場合はこの番号を確認し、古ければ最新のバージョンに変更してください。
この番号を最新の番号に変更するだけで、Webアイコンも最新のものが使用できます。
以上が、Font AwesomeのWebアイコンが表示されない時の対処法でした。
