FontAwesome5から使用可能!KITの設定について。

FontAwesome5_KITの設定_eyecatch

FontAwesome4ではアイコンを読み込む方法の一つとして、CDNが使用されていました。バージョンごとに分類されているものの世界中の人が同じCDNを使っていました。このためアカウント登録も不要でした。

FontAwesome5になってからはメールアドレスでのアカウント登録が必須になり、Kit's Codeというアイコン読み込み用のコードがアカウントごとに発行されるようになり、使用するアイコンやFontAwesomeのバージョン、読み込み方法を個別に設定できるようになりました。

そちらの設定画面について記載します。

初期設定でうまく設定されていますので、設定方法というよりはKitで出来ることのまとめです。

Kit'sの要点と設定について

FontAwesome5でKitを使用するにはアカウント登録が必須になります。
登録方法は別の記事で紹介していますので、必要な方はそちらをご覧ください。

Kit'sの設定画面に進む

【2021年4.13時点】
アカウント登録後、FontAwesomeの公式ページにログインするとアカウントの各Kitごとに個別設定が可能です。

【公式ページ】Font Awesome

公式ページにログイン後、画面右上のマークを押します。

メニューが表示されますので「Kits」に進みます。

FontAwesome5_KITの設定_002

設定するKitsを選択する

設定したいKitsを選びます。

Kit's Codeが表示されている画面が表示されます。
「How to Use」タブから「Settings」のタブに切り替えます。

Kitsの設定を行う

Settingsの画面では使用しているFontAwesomeについて次の設定が可能です。

・Kit Name:キット名。
・Icons:FreeかProの選択。
・Technology:「Web Font」か「SVG」の選択。
・Domains:Kitを使用するドメインの指定。
・Version:使用するバージョンの選択。
・Features:アクセシビティー、Ver.4の相互性、競合の修正。

順番に見ていきましょう。設定画面の上半分から見ていきます。

FontAwesome5_KITの設定_003

Kitの設定画面(前半)

Kit Name

キット名を変更します。
初期状態ではキット名=キットコード名となっていますが変更することが可能です。
使用するサイト名などにしておくとKitを複数使用する場合に便利かもしれません。
※キット名を変更してもKit's Codeは変更されませんのでそのまま使用可能です。

Icons

無料バージョンのFreeかProを選択します。

Technology

アイコン表示のフレームワークを「Web Font」か「SVG」から選ぶことが可能です。

「Web Font」はCSSの疑似要素としてアイコンを表示することが出来ます。
FontAwesome4でも使用されていました。昔から使われている方式なのでネット上にも情報が多く、特別な理由がない限りWebFontがオススメです。

「SVG」は最近対応するブラウザが増えてきました。
アイコンをJSスクリプトで描画することにより「Web Font」よりも高速で動作し、拡大、縮小表示などには強いですが設定が難しいです。

Domains

Kitを使用するサイトを制限したい場合は、使用するサイトのドメインを登録しておきます。(複数登録可)

初期設定では、Kit's Codeを知っていれば誰でも使用できる状態です。
複数サイトでFontAwesomeのKitを使用する場合、使用するサイトごとにKit及びドメインを分けておくと管理が楽です。

また、他人に意図しない使用方法(ライセンス違反)をされないためにも設定しておくと安心です。

【ドメインの登録例】
・sologaku.com
・www.sologaku.com

公式ページにも案内がありますが、wwwありとwwwなしは別のものとして扱われるようですので、それぞれ登録しておく必要があるようです。

FontAwesome5_KITの設定_004

Kitの設定画面(後半)

続いて設定画面の後半部分です。

Version

使用するFontAwesome5のバージョンを細かく設定できます。
デフォルトでは最新バージョンを自動的に読み込むように設定されています。

なおバージョンはVer.5.7.0から設定可能です。

Features

自動アクセシビリティー(area-hidden)の付与やバージョン4との相互性、複数FontAwesomeを読み込んだ場合の干渉チェックなどの設定ができます。

Auto-Accessibility

初期設定でONになっています。
ブラウザの音声読み上げ(スクリーンリーダー)に自然に対応することが可能です。
アイコンにタイトルタグを設定することで"sr-only"クラスが自動付与されます。

Enable Version 4 Compatibility

初期設定でONになっています。
FontAwesome4との自動相互機能です。
FontAwesome5ではアイコン表示のクラスが「fa」ではなく「fas」などになりましたが、FontAwesome4の時のように「fa」を使用した場合でも問題なくアイコンを表示してくれます。

この機能のおかげでFontAwesome4で記述した記事を修正することなく5に移行することが出来ます。

Conflict Detection

初期設定ではOFFになっています。
サイトに複数のFontAwesomeが読み込まれている場合、自動的に干渉問題をチェックし、修正してくれます。
通常、複数読み込まれていることの方が問題と思われますので、この機能に頼らずに対応したいところ。

Kitをアカウントから削除する

Settings画面からKitを削除することが出来ます。
ゴミ箱マークをクリックすると確認画面が出ます。
FontAwesome5_KITの設定_005確認画面に記載されているように、Kitを削除するとそのKitを使っているサイトのアイコンが表示されなくなります。
また、削除の取り消しはできないようですので十分に注意が必要です。

ひとこと

サイトに合わせてアカウント内のKitsごとにFontAwesomeの設定が個別に設定できるのは良いですね!

WordPressの場合テーマ内にFontAwesomeのアイコンが入っているものも多く、Kitを使用する機会が少ないかもしれません。
あまり知られていませんが、Kitを使用している場合Freeバージョンですとアイコンの表示回数は1万回/月となっているようです。

-サイト構築

© 2021 ソロ学