「あれ？ アフィンガー６に変えてから、ヘッダーメニューに表示させていたWEBアイコンが消えてる……」
「え、なんで？ どうすればいいの？」
という悩みに答えます。
実際に僕もこの問題に直面してけっこう悩みました。
一応「ACTION（AFFINGER６）」のマニュアルにはFont Awesomeについて書いてあるんですが、それでも「え、どういうこと？」ってなったからです。
そこで解決策を調べまくりました。
結論からいうと、ヘッダーメニューにWEBアイコンを表示させる方法は２つあります。
- アフィンガー管理メニューの設定を変える
- Font Awesome５を使えるようにする
今回は、この２つの方法の解説と手順について書いていきたいと思います。
使えない原因は
今まで使えていたWEBアイコンが使えなくなっている原因は単純に、FontAwesomeIcons4.7.0の読み込みがオフになっているからです。
なぜこのような仕様になっているのかというと、アフィンガー６は「FontAwesome4.7」ではなく、「FontAwesome5」の仕様を前提にしているというのがあります。
新しいバージョンの「FontAwesome5」のほうがWEBアイコンの種類がたくさんあるので、さまざまなサイトテーマにあったアイコンを使えると考えているんでしょうね。
「え～、じゃあ今まで使っていたWEBアイコンは使えないってこと？」
という声が聞こえてきそうですが、「FontAwesome4.7」を完全に使えなくなるわけではないので安心してください（手順については「手順１」で解説します。）。
「今までと同じ「FontAwesome4.7」が使えればいいです」
という方は「手順１」に進んでください。
「いや、どうせならバージョンアップした『FontAwesome5』を使ってみたい！」
という方は「手順２」に進んでください。
「FontAwesome5」を使えるようにするには、
- 「FontAwesome5」のアカウント登録
- コードをheadに貼り付ける
という少しめんどくさい手順が必要です。
ACTION MANUALを見ても「FontAwesome5」へのアカウント登録については書いてなかったので、どうやればいいのかわからない人は多いと思います（僕もはじめは戸惑いました）。
- まずは「FontAwesome4.7」を使えるようにする方法
- 次に「FontAwesome5」を使えるようにする方法
- 最後に、実際に使えるかどうかを確認する
という流れで詳しく解説していきます。
＜手順１＞「FontAwesome4.7」を使えるようにする
まずは、ダッシュボードの左メニューにある「AFFINGER管理」を開きます。
次に「その他」を開き、「FontAwesome4.7.0の読み込み」にチェックを入れ、「Save」をクリックすれば完了です。
AFFINGER６にアップデートしていれば、ここのチェックが外れているはず。
手順はたったこれだけです。
これで「FontAwesome4.7」が表示されるようになっているはずです。
続いて「FontAwesome5」を使えるようにする手順を解説します。
＜手順２＞「FontAwesome5」を使えるようにする
「FontAwesome5」を使えるようにするために必要なのは、
- 「Font Awesome」へのアカウント登録
- コードをheadに貼り付ける
この２ステップです。
アカウント登録する
まず、「Font Awesome」のトップページを開きます。
次に「Start for Free」（無料ではじめる）をクリック。
赤枠で囲ったところに メールアドレスを入力し、「Create & Use This Kit →」をクリック。
「What's the name of your project or site?」←直訳すると、「あなたのプロジェクトやサイトの名前は何ですか？」ですが、ここはメールアドレスを入力すればＯＫです。
▼
「Check Your Email」と表示されているので、先ほど入力したメールアドレスの受信箱を確認します。
「Confirm Your Font Awesome Account Email Address（FontAwesomeアカウントのメールアドレスを確認する）」という件名でメールが届いているはずです。
メールを開いて、「Click to Confirm Your Email Address + Set Things Up」をクリックすると、続いて設定画面へ移ります。
パスワードを設定するページに飛ぶので、❶Font Awesomeのアカウント用パスワードを入力、❷確認のため下にも同じパスワードを入力し、「Set Password & Continue →」（パスワードを設定して続行）をクリック。
名前を登録します。
とりあえず、❶（名前）と❷（苗字）だけ入力して「All set. Let's go! →」をクリック。
❸は「Unknown」ままで、❹は空白のままでも大丈夫でした。
これでアカウント登録は完了です。
コードを設定する
まずは「Font Awesome」のトップページを開きます。
次に、右上にある人型のアイコンをクリック。
するとサイドメニューが開くので、「Font Awesome CDN」をクリック。
次にコードが表示されるので、右下にあるコピーアイコンをクリック。
もしくはコードを選択してマウスを右クリックし、コピーを選択する。
アフィンガー管理に戻ります。
左メニューにある「その他」をクリック。
「上級者向け」の中に「コードの出力」という項目があります。
赤で囲んだ「headに出力するコード」の欄に、先ほどコピーしたコードを貼り付けて「Save」をクリック。
これですべての手順は完了しました。
WEBアイコンが使えるかを確認する
実際にWEBアイコンが使えるようになっているのかを確認したいと思います。
「Font Awesome」のトップページを開き、上のメニューにある「Icons」をクリック。
アイコンのページが開きます。
この状態だと有料アイコンも一緒に表示されているので、数が多すぎるし見にくい！
これをスッキリさせるために、フリーのアイコンだけを表示させます。
左メニューにある「Free」をクリック。
するとフリーアイコンだけが表示されてスッキリしました♪
とりあえず、ワードプレスのアイコンを設定しようと思います。
アイコンはローマ字順に並んでいるので、ワードプレス（WordPress）は下のほうになりますよね。
スクロールするのがめんどくさいので、検索窓に「word」と入力して表示させましょう。
メニューアイコンいしたい方のアイコンをクリックします。
赤で囲んだコード<i class="fab fa-wordpress"></i>をクリックするとコピーされます。
次に、アフィンガーのメニュー設定を開きます。
WEBアイコンを表示させたいメニューの「ナビゲーションラベル」に、先ほどコピーしたコードを貼り付けます。
形としては、「WEBアイコンのコード」+「メニュー名」です。
実際にアイコンが表示されていれば、無事完了です♪
お疲れさまでした(*^^*)
まとめ
今回は、メニューにWEBアイコンを表示させる方法について解説しました。
「Font Awesome」のHPはぜんぶ英語だし、アカウント登録がめんどくさいですけど、手順さえわかれば簡単だったと思います。
アフィンガー５のときは大丈夫だったのに、アフィンガー６にアップデートしたとたん表示されなくなったよ～～～（ぴえーーーん ( ﾉД`)ｼｸｼｸ…）
という方は一度この記事で解説した方法を試してみてください。
