「あれ？ アフィンガー６に変えてから、ヘッダーメニューに表示させていたWEBアイコンが消えてる……」
「え、なんで？ どうすればいいの？」
という悩みに答えます。
実際に僕もこの問題に直面してけっこう悩みました。
一応「ACTION（AFFINGER６）」のマニュアルにはFont Awesomeについて書いてあるんですが、それでも「え、どういうこと？」ってなったからです。
そこで解決策を調べまくりました。
ヘッダーメニューにWEBアイコンを表示させる方法は２つあります。
- アフィンガー管理メニューの設定を変える
- Font Awesome５を使えるようにする
今回は、この２つの方法の解説と手順について書いていきたいと思います。
「Font Awesome」は現在「６」にバージョンアップしています。
※使用方法については以下の記事に詳しく書いてあるので参考にしてください。
アフィンガー６でWEBアイコン使えない原因は？
今まで使えていたWEBアイコンが使えなくなっている原因は単純に、FontAwesomeIcons4.7.0の読み込みがオフになっているからです。
なぜこのような仕様になっているのかというと、アフィンガー６は「FontAwesome4.7」ではなく、「FontAwesome5」の仕様を前提にしているからです。
新しいバージョンの「FontAwesome5」のほうがWEBアイコンの種類がたくさんあるので、さまざまなサイトテーマにあったアイコンを使えると考えているんでしょうね。
「え～、じゃあ今まで使っていたWEBアイコンは使えないってこと？」
という声が聞こえてきそうですが、「FontAwesome4.7」を完全に使えなくなるわけではないので安心してください（手順については「手順１」で解説します。）。
今までと同じ「FontAwesome4.7」が使えればいいです！
という方は「手順１」に進んでください。
いや、どうせならバージョンアップした「FontAwesome5」 を使ってみたい！
という方は「手順２」に進んでください。
「FontAwesome5」を使えるようにするには、
- 「FontAwesome5」のアカウント登録
- コードをheadに貼り付ける
という少しめんどくさい手順が必要です。
ACTION MANUALを見ても「FontAwesome」のアカウント登録については書いてなかったので、どうやればいいのかわからない人は多いと思います（僕もはじめは戸惑いました）。
- まずは「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!］をクリックします。
これでアカウント登録は完了です。
コードを設定する
まずは「Font Awesome」のトップページを開き、［Your Kits］をクリック。
赤で囲んだ部分をクリックすると、コードが表示されます。
▼
コードをコピーし「AFFINGER管理」に戻ります。
左メニューにある「その他」をクリック。
「上級者向け」の中に「コードの出力」という項目があります。
赤で囲んだ「headに出力するコード」の欄に、先ほどコピーしたコードを貼り付けて「Save」をクリック。
これですべての手順は完了しました。
WEBアイコンが使えるかを確認する
実際にWEBアイコンが使えるようになっているのかを確認したいと思います。
「Font Awesome」のトップページを開き、上のメニューにある「Icons」をクリック。
アイコンのページが開きます。
この状態だと有料アイコンも一緒に表示されているので、数が多すぎるし見にくい！
これをスッキリさせるために、フリーのアイコンだけを表示させます。
左メニューにある「Free」をクリック。
するとフリーアイコンだけが表示されてスッキリしました♪
とりあえず、ワードプレスのアイコンを設定しようと思います。
アイコンはローマ字順に並んでいるので、ワードプレス（WordPress）は下のほうになりますよね。
スクロールするのがめんどくさいので、検索窓に「word」と入力して表示させましょう。
メニューアイコンいしたい方のアイコンをクリックします。
赤で囲んだコード<i class="fab fa-wordpress"></i>をクリックするとコピーされます。
次に、アフィンガーのメニュー設定を開きます。
WEBアイコンを表示させたいメニューの「ナビゲーションラベル」に、先ほどコピーしたコードを貼り付けます。
形としては、「WEBアイコンのコード」+「メニュー名」です。
実際にアイコンが表示されていれば、無事完了です♪
お疲れさまでした(*^^*)
まとめ
今回は、メニューにWEBアイコンを表示させる方法について解説しました。
「Font Awesome」のHPはぜんぶ英語だし、アカウント登録がめんどくさいですけど、手順さえわかれば簡単だったと思います。
アフィンガー５のときは大丈夫だったのに、アフィンガー６にアップデートしたとたん表示されなくなったよ～～～（ぴえーーーん ( ﾉД`)ｼｸｼｸ…）
という方は一度この記事で解説した方法を試してみてください。
※最新版のコード取得方法は、以下の記事を参考にしてください。
