ブログ運営

【アフィンガー6】メニューにアイコンを表示する方法【Font Awesome5を利用】

2022年1月4日

アフィンガー6のメニューにアイコンを表示させたいけど、やり方がわからない

本記事では、こういった悩みを解決します。

アフィンガー6のメニューにアイコンを表示させるには「Font Awesome5」を利用すればOKです。

「Font Awesome5」を利用すれば、以下のようにアイコンを表示することができますよ。

本記事では、「Font Awesome5」を利用してアフィンガー6のメニューにアイコンを表示する方法を解説したいと思います。

Font Awesomeとは

Font Awesomeとは、無料で利用可能なWebアイコンのことで、利用できるアイコンの種類が豊富なのも特徴で、人気の高いサービスになっています。

無料版でも1600種類以上のアイコンが利用でき、有料のプロ版も含めると8000近くのアイコンが利用可能になります。

Font Awesome公式サイト

アフィンガー6のメニューにアイコンを表示する方法

アフィンガー6で「Font Awesome5」を利用して、メニューにアイコンを表示する流れは以下の通りです。

簡単な流れ

  • 「FontAwesome5」のアカウント作成
  • アイコンコードを取得
  • メニューにアイコンを表示

「Font Awesome5」のアカウント作成

まずは「Font Awesome5」のアカウントを作成していきましょう。

以下のリンクからFont Awesome公式サイトを表示します。

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)

Font Awesome公式サイト

 

アイコン一覧が表示されるので、ここから好みのアイコンを探していきましょう。

薄いグレーになっているアイコンは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カスタマイズ】メニューの高さを変更する方法を紹介」で解説しているので、気になる方はこちらも参考にしてみてください。

この記事を書いた人

くりすぷ

プログラマー10年経験した後、独立。ブロガー、Webライター、ネット物販で収入を得ながら、たまに海外一人旅をしています。

>>プロフィール詳細

-ブログ運営
-