「あれ? アフィンガー6に変えてから、ヘッダーメニューに表示させていたWEBアイコンが消えてる……」
「え、なんで? どうすればいいの?」
という悩みに答えます。
実際に僕もこの問題に直面してけっこう悩みました。
一応「ACTION(AFFINGER6)」のマニュアルにはFont Awesomeについて書いてあるんですが、それでも「え、どういうこと?」ってなったからです。
そこで解決策を調べまくりました。
結論からいうと、ヘッダーメニューにWEBアイコンを表示させる方法は2つあります。
- アフィンガー管理メニューの設定を変える
- Font Awesome5を使えるようにする
今回は、この2つの方法の解説と手順について書いていきたいと思います。
使えない原因は
今まで使えていたWEBアイコンが使えなくなっている原因は単純に、FontAwesomeIcons4.7.0の読み込みがオフになっているからです。
なぜこのような仕様になっているのかというと、アフィンガー6は「FontAwesome4.7」ではなく、「FontAwesome5」の仕様を前提にしているというのがあります。
新しいバージョンの「FontAwesome5」のほうがWEBアイコンの種類がたくさんあるので、さまざまなサイトテーマにあったアイコンを使えると考えているんでしょうね。
「え~、じゃあ今まで使っていたWEBアイコンは使えないってこと?」
という声が聞こえてきそうですが、「FontAwesome4.7」を完全に使えなくなるわけではないので安心してください(手順については「手順1」で解説します。)。
「今までと同じ「FontAwesome4.7」が使えればいいです」
という方は「手順1」に進んでください。
「いや、どうせならバージョンアップした『FontAwesome5』を使ってみたい!」
という方は「手順2」に進んでください。
「FontAwesome5」を使えるようにするには、
- 「FontAwesome5」のアカウント登録
- コードをheadに貼り付ける
という少しめんどくさい手順が必要です。
ACTION MANUALを見ても「FontAwesome5」へのアカウント登録については書いてなかったので、どうやればいいのかわからない人は多いと思います(僕もはじめは戸惑いました)。
- まずは「FontAwesome4.7」を使えるようにする方法
- 次に「FontAwesome5」を使えるようにする方法
- 最後に、実際に使えるかどうかを確認する
という流れで詳しく解説していきます。
<手順1>「FontAwesome4.7」を使えるようにする
まずは、ダッシュボードの左メニューにある「AFFINGER管理」を開きます。

次に「その他」を開き、「FontAwesome4.7.0の読み込み」にチェックを入れ、「Save」をクリックすれば完了です。
AFFINGER6にアップデートしていれば、ここのチェックが外れているはず。

手順はたったこれだけです。
これで「FontAwesome4.7」が表示されるようになっているはずです。
続いて「FontAwesome5」を使えるようにする手順を解説します。
<手順2>「FontAwesome5」を使えるようにする
「FontAwesome5」を使えるようにするために必要なのは、
- 「Font Awesome」へのアカウント登録
- コードをheadに貼り付ける
この2ステップです。
アカウント登録する
まず、「Font Awesome」のトップページを開きます。
次に「Start for Free」(無料ではじめる)をクリック。

赤枠で囲ったところに メールアドレスを入力し、「Create & Use This Kit →」をクリック。
「What's the name of your project or site?」←直訳すると、「あなたのプロジェクトやサイトの名前は何ですか?」ですが、ここはメールアドレスを入力すればOKです。

▼

「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はぜんぶ英語だし、アカウント登録がめんどくさいですけど、手順さえわかれば簡単だったと思います。
アフィンガー5のときは大丈夫だったのに、アフィンガー6にアップデートしたとたん表示されなくなったよ~~~(ぴえーーーん ( ノД`)シクシク…)
という方は一度この記事で解説した方法を試してみてください。