AFFINGER5

コピペでOK! アフィンガー5のメニューにアイコンを表示する方法

初心ちゃん
メニューにアイコンを使ってるサイトのマネしてみたいな。

ブログの中でアイコンを使うと見た目がグンと良くなります。

このサイトでもメニューにアイコンを使用していますが、文字だけで表示するより確実にアイキャッチ効果があります。

アフィンガー5を使っていてマネをしてみたいという方のために、この記事ではメニューにアイコンを表示させる方法を解説します。

アフィンガー5でアイコンを表示させるにはFontAwesomeを使用します。

FontAwesomeとは

FontAwesomeは無料で使えるWebアイコンフォントです。アイコンの種類がとにかく豊富でブログの中でも色々なところで使うことができます。

Fontawesome画面

有料のアイコンもありますが、種類が豊富なので無料分だけでも十分です。

もちろんアフィンガー5以外のテーマでも使用することは可能です。

アイコンの探し方

それではメニューに表示させるアイコンを探してみましょう。

メニューの内容に合ったアイコンを探さないといけないので検索窓に英語でキーワードを入力します。

fontawesomeは日本語対応ではないので英語での入力が必要です。

いろいろなアイコンがあって見ているだけでも楽しいですが、キーワード検索をすると該当するアイコンが抽出されます。

注意ポイント

2020年4月1日現在、アフィンガー5はfontawesomeのver4.7までしか対応していません。使えるアイコンの数はver5の方が多いですが表示されない可能性があるので使わない方が無難です。

それでは当サイトのメニューにも使っているスーツケースのアイコンを探してみましょう。

検索窓にsuitcaseと入力するとスーツケースのアイコンが抽出されますのでクリックしてみましょう。

Fontawesome検索画面

画面下に生成されたコードがスーツケースアイコンを表示させるコードになっています。

Fontawesome

メニューへ表示させる方法

使用するアイコンが決まったらアフィンガーのメニューに表示させましょう。

ワードプレスの管理メニューにログインして外観>メニューを選択します。

ワードプレス管理画面

メニュー選択画面です。

今回はヘッダー部のメインメニューの「TRAVEL」の文字の前にアイコンを表示させたいのでヘッダー用メニューを選択します。

ワードプレスメニュー管理画面

「TRAVEL」の項目のプルダウンメニューを開き、先程のスーツケースのコードをナビゲーションラベルに入力します。

コピペで大丈夫なので簡単です。

<I class="fa fa-suitcase" aria-hidden="true"></i>

ワードプレスメニュー管理画面2
ワードプレスメニュー管理画面3

アフィンガー5で行う設定はこれだけです。

まとめ

コピペだけの簡単な作業でメニューにアイコンを表示させることができました。

メニュー画面1
メニュー画面2

他のメニュー項目にもアイコンを表示させるとこんな感じで見た目もすごく良くなりました。

皆さんも是非FontAwesomeのアイコンを使ってみましょう。

 

 

ブログランキングに参加しています。よろしければクリックお願いします。

にほんブログ村 小遣いブログ マイレージへ
にほんブログ村

-AFFINGER5
-

© 2020 Domesenlife Powered by AFFINGER5