久しぶりにFont Awesomeを使ってみたら、マイページのどこにもCDNが見つからない……。

何やら、代わりに「Font Awesome Kits」というものが用意されていました。

試しにKitsを使ってみるも、反映されない

Font AwesomeのマイページでCDNが見当たらない代わりに、「Font Awesome Kits」との項目があったので、「Manage Kit」のリンクをクリックしてみます。

何やら既にキット（？）が作ってありましたので、クリック。

すると、headタグに貼り付ける用の「Kit’s Code」なるscriptコードがありました。

以前のCDN用linkタグとは異なるようですが、手順をみる限り、使い方としてはCDNと同じようです。

では指示に従い、headタグに「Kit’s Code」を貼り付けて……。

先のFont AwesomeのKits管理ページに、アイコンの使い方として、

Find and Add Any of Our Free Icons to a Project
Browse the thousands of icons to find some icons you like and then add the icon name and style as CSS classes to an HTML <i> tag.

とありますので、CDNのときと同じように、Font Awesomeで好きなアイコンを検索し、iタグをHTMLに貼り付ければ良いようです。

Twitterアイコンを使いたかったので、検索して探し、iタグをコピー。

貼り付け！ これで反映されるはず……。

あれ？？ 反映されていません。

結論：Settingの「Version」をLatest 6.xにすると表示された

結論として、Kit’sの管理画面の設定（Setting）画面にて、「Version」を「Latest 6.x」にすると反映されました。

まずは、自分のKit’s管理画面にて、「Setting」タブをクリック。

「Version」を「Latest 6.x」にし、「Save Changes」で保存します。

これで、コーディング中のページをリロードしてみます。

アイコンが反映されました！

まとめ

もし、「Kit’s Codeをheadに入れているのに、アイコンが反映されない……」という場合には、一度上記の方法を試してみてください。

Kitという新しい仕組みが導入されましたが、使い方としてはCDNとほとんど変わりないようです。

仕様が変わり一瞬不便でしたが、やはりFont Awesome便利。

同じように詰まってしまった方のお役に立てましたら幸いです。