今回は、Font Awesome（Version6）のWebアイコンをAFFINGER6で使うためのコード取得方法について解説します。
「Font Awesome 6」のWebアイコンを使う方法は3つあります。
- CDNコードを使う
- Kitコードを使う
- サーバーにアイコンデータをアップロードする
CDNとは
CDNは「Content Delivery Network」の略で、同じコンテンツをユーザーの端末に効率的に配布するために使われる仕組みです。
つまり、専用のサーバー上にある画像やフォントなどのデータを読み込み、自分のWebサイトに表示させることができます。
Kitとは
バージョン変更やアイコンフォントのベース変更（Web Fonts, SVG）を自動化するために、アカウントの管理システムで設定するようにしたものです。
3の「サーバーにアイコンデータをアップロードする方法」は現実的ではないので除外します。
FontAwesomeに新しいアイコンが追加されるたびにダウンロードし直す必要があるし、自分のサーバーへの負荷もかかるからです。
Font Awesome 6のWebアイコンをAFFINGER6で使用する場合は「CDNコード」または「Kit'sコード」を使用するんですが、どちらのコードを使えばいいのかというと、現時点では「CDNコード」がおすすめです。
それでは「CDNコード」と「Kit'sコード」の取得方法と、Font Awesome 6をAFFINGER6で使用できるようにする手順を解説していきます。
FontAwesomeの「Free版」の使用を前提に解説していきます。（※Pro版を使用する場合はCDNコードではなくKitコードが必要です）
「CDNコード」と「Kit'sコード」の違い
「CDNコード」と「Kit'sコード」との大きな違いは、
- 使用制限があるかどうか
- バージョン番号の修正が必要かどうか
この2つです。
Webアイコンの使用制限について
「Kit'sコード」にはプランごとの使用制限があります。
FREEプランで月10000PV、Proプランで1000000PVという制限があります。
| プラン | ページビュー | 料金 |
|---|---|---|
| Free | 10,000 | 0 $ |
| Pro | 1,000,000 | 99 $ |
| Pro Max | 10,000,000 | 499 $ |
数サイト運営している程度ならFreeプランで十分なんですが、100万PVとか1000万PV以上を叩き出すモンスターサイトを運営している場合はProプランに切り替えないとキツいかもしれません。
僕が運営しているサイトはだいたい月300000PVぐらいあるんですが、使用制限はかかっていません。
なぜなら、基本はAFFINGER6のデフォルトアイコンを使用し、デフォルトにないアイコンのみFontAwesomeを使用しているからです。
※AFFINGER6のデフォルトで使用できるWebアイコンは以下の記事にまとめています。
どうしても使用制限が気になる方は、使用制限のない「CDNコード」の使用をおすすめします。
バージョン番号の修正について
「Kit'sコード」は新しいバージョンのWebアイコンに自動で対応できるのに対し、「CDNコード」はバージョンを手動で修正しなければ行けません。
といってもむずかしいことはなく、「CDNコード」に記載されているバージョン番号を修正するだけです。
バージョン番号を修正については、後ほど詳しく解説します。
Webアイコンを使用するためのCDNコード
AFFINGER6で「Font Awesome 6」を使用するためのCDNコードは2パターンあります。
- アカウント作成が必要なCDNコード
- アカウントなしで使えるCDNコード
アカウント作成が必要なCDNコード
既にアカウント作成済みの方はサインインした状態で以下のURLを開くとCDNコードが表示されます。
https://fontawesome.com/account/cdn
このページは、FontAwesomeのアカウント登録が完了していないと表示されません。
※アカウント登録の方法は、以下の記事に詳しく書いてあるので参考にしてください。
アカウントなしで使えるCDNコード
<link href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" rel="stylesheet"><link rel ="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">上の2つがアカウントなしで使えるCDNコードです。
どちらを使ってもOKです。
CDNコードはバージョン番号の修正が必要
先にも書いたように、CDNコードはバージョン番号の修正が必要です。
バージョン番号をそのままにしておくと、新しく追加されたWebアイコンが表示されません。
新しく追加されたWebアイコンを使用しない場合は、バージョン番号の修正は必要ありません。
CDNコードの赤文字の部分がバージョン番号です。
新しく追加されたWebアイコンを使用したい場合は、新しくなったバージョン番号に変更してください。（現時点でのバージョンは「v6.1.1」です）
バージョンの変更は「変更ログ」で確認できます。
「Kit'sコード」を取得する手順
「Kit'sコード」の使用は、FontAwesomeのアカウント作成が絶対条件です。アカウント登録がまだの方はまずアカウントの作成を行ってください。
１．FontAwesomeのトップページを開きます。
２．［Your Kits］をクリック。
３．赤枠の部分をクリック。
４．すると「Kitsコード」が表示されます。
Kitsコードもバージョンアップで設定変更が必要な場合がある
Kitsコードはバージョン変更しても自動で対応してくれるんですが、以下のようなケースは設定変更が必要です。
「v6.1.1」→「v7.0.0」になった場合
いわゆる「メジャーバージョンアップ」と言われるバージョン変更です。
アイフォンを例にすると、ios14→ios15 になるような感じです。
この場合は、アカウントページより設定を開き、対応する新しいバージョンを選択してください。
※Kitsコードの設定変更については以下の記事を参考にしてください。
Font Awesome 6 を AFFINGER6 で使用できるようにする
最後に、Font Awesome 6 を AFFINGER6 で使用するための設定を解説します。
通常FontAwesomeのWebアイコンを表示するには、headタグ内にコードを貼付ける必要があるんですが、AFFINGER6ではAFFINGER管理の「コードの出力」という項目にコードを貼り付けるだけで完了します。
１．「AFFINGER管理」メニューを開き、「その他」をクリック。
２．「上級者向け」の中にある「headに出力するコード」に「CDNコード」または「Kitsコード」を貼り付ける。
あとは「Save」を押して保存します。
これで、Font Awesome 6 のFREEアイコンすべてがAFFINGER専用ブロックでも使用できるようになっています。
