アフィンガー6のメニューにアイコンを表示させたいけど、やり方がわからない
本記事では、こういった悩みを解決します。
アフィンガー6のメニューにアイコンを表示させるには「Font Awesome5」を利用すればOKです。
「Font Awesome5」を利用すれば、以下のようにアイコンを表示することができますよ。
本記事では、「Font Awesome5」を利用してアフィンガー6のメニューにアイコンを表示する方法を解説したいと思います。
Font Awesomeとは
Font Awesomeとは、無料で利用可能なWebアイコンのことで、利用できるアイコンの種類が豊富なのも特徴で、人気の高いサービスになっています。
無料版でも1600種類以上のアイコンが利用でき、有料のプロ版も含めると8000近くのアイコンが利用可能になります。
アフィンガー6のメニューにアイコンを表示する方法
アフィンガー6で「Font Awesome5」を利用して、メニューにアイコンを表示する流れは以下の通りです。
簡単な流れ
- 「FontAwesome5」のアカウント作成
- アイコンコードを取得
- メニューにアイコンを表示
「Font Awesome5」のアカウント作成
まずは「Font Awesome5」のアカウントを作成していきましょう。
以下のリンクからFont Awesome公式サイトを表示します。
「Start for Free」ボタンをクリックします。
「メールアドレス」を入力して「Send Kit Code」ボタンをクリックします。
「Click to Comfirm Your Email Address + Set Things Up」をクリックします。
パスワードの設定を求められるので、パスワードを入力して「Set Password & Continue」ボタンをクリックします。
次に、詳細情報の入力を求められますが、入力しなくても問題ありません。
一番下にある「No Thanks. Let's skip this step for now.」リンクをクリックします。
WordPressで「Font Awesome5」を利用するのに必要な「Kit's Code」が発行されるのでコピーします。
「Copy Kit Code!」ボタンをクリックするとコピーされます。
コピーした「Kit's Code」をWordPressに設定します。
WordPressの管理画面から「AFFINGER管理」→「その他」を選択します。
「上級者向け」の箇所に「</>コードの出力」という項目があります。
「head」のボックス内に、先ほどコピーした「Kit's Code」を貼り付けます。貼り付けが終わったら「save」ボタンを押しましょう。
これでWordPressから「Font Awesome5」を利用する準備はOKです。
アイコンコードの取得
次に、メニューに表示したいアイコンを選んでいきます。
Font Awesome公式サイトのメニューから「Icons」をクリックします。（検索ボックスから直接検索してもOK）
アイコン一覧が表示されるので、ここから好みのアイコンを探していきましょう。
薄いグレーになっているアイコンはPro版のみなので、左側にあるメニューで「Free」にチェックを入れておきましょう。
画面上部の検索ボックスにアイコンの検索ワードを入力します。
今回は例として「Travel」と入力。
関連するアイコンが表示されるので、好きなアイコンを選びましょう。今回は、赤枠の飛行機アイコンをクリックします。
「飛行機（plane）」の詳細画面が表示されるので「Start Using This Icon」をクリックします。
HTMLコードが表示されるのでコピーします。青丸のファイルアイコンをクリックするとコピーできます。
メニューにアイコンを表示
最後に、アフィンガーのメニューにHTMLコードを貼り付けます。
WordPressメニューから「外観」→「メニュー」を選択します。
アイコンを表示させたいメニュー項目を選んで、ナビゲーションラベルにコピーしたHTMLコードを貼り付けます。
文字の前にHTMLコードを貼り付ければOKです。
以下のようになればOKです。
<i class="fas fa-plane"></i> 海外一人旅
アイコンと文字の距離を調整したい場合は「スペース」を入れて調整しましょう。
HTMLコードの貼り付けが終わったら「メニューを保存」ボタンをクリックします。
こんな感じでメニューにアイコンが表示されます。
あとは他のカテゴリーにも好きなアイコンを設定していけばOKです。
まとめ
「Font Awesome5」を利用して、アフィンガー6のメニューにアイコンを表示する方法を解説してきました。
メニューだけではなくて、記事の本文中にも「Font Awesome5」のアイコンを表示させることができますよ。
ちなみに当ブログのメニューですが、他のカテゴリーにもアイコンを設定して、こんな感じにしてみました。
ということで、ぜひ本記事を参考にしていただければと思います。
アフィンガー6のメニュー関連のカスタマイズでは、高さの変更方法をこちらの記事「【アフィンガー6カスタマイズ】メニューの高さを変更する方法を紹介」で解説しているので、気になる方はこちらも参考にしてみてください。
この記事を書いた人
