![](https://yodaredoriblog.com/wp-content/uploads/2020/10/human-3175027_1920.jpg)
![](https://yodaredoriblog.com/wp-content/uploads/2021/01/42e38399f837884372eeb6be2a8975e2-e1610890019798-300x300.png)
アフィンガー5のメニューにアイコンを表示させたい!
こんな悩みに答えます
メニューアイコンはこんな感じ。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/7c0655a405b2635a0007a3dc5000405e-scaled.jpg)
ちょっとカスタマイズしてアイコンを加えるだけでこんなメリットが
- デフォルトで使っている人と差別化できる
- 簡単にオシャレに見える
- ユーザーが内容を分かりやすくなる
などなど費用対効果バツグンです。
本記事の信頼性
![](https://yodaredoriblog.com/wp-content/uploads/2021/02/JET-6.png)
本記事の内容
・コピペでするだけ!アフィンガー5でメニューにアイコンを表示させる方法を解説
この記事を読めばブログの顔とも言えるトップページをちょっとだけオシャレに出来るかも!?
コピペでOK!アフィンガー5でメニューにアイコンを表示させる方法
step
1FontAwesomeにアクセス
アフィンガー5では最初からFontAwesomeでwebアイコンを使用出来ます。
※FontAwesomeの推奨バージョンはv.4.7.0なのでアップデートの表示が出ても、しないように注意しましょう。
まずはFontAwesomeにアクセスしましょう。
step
2アイコンを選ぶ
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/6857866b3650d9a4538bb93c881c4c08.png)
このようにいっぱい出てくるので一つ一つ見ていってもいいのですが、今回は検索窓から検索してみます。
ちなみに検索窓には英語でのみ検索が出来ます。
![](https://yodaredoriblog.com/wp-content/uploads/2020/12/IMG_8805-2-e1608991048560-300x290.png)
調べたい単語をGoogle翻訳などで英語に変換して検索してみましょう!
step
3今回は『home』で検索
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/4ef82b1eae3ce09938745f3172eae4a0-1024x208.png)
今回は『home』で検索してみます。
するとこのように出てくるので、使いたいアイコンをクリック。
step
4コードをコピー
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/f01b8f6f1b73d9b516bf48103b0494e1-scaled.jpg)
下にあるコードをコピーして準備完了です。
step
5WordPressを開いて『外観』→『メニュー』を選択
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/6e5f095faf400a33b019e58c43ff654f-1024x461.jpg)
WordPressを開いて、左の項目から『外観』→『メニュー』の順番で選択
先程のコードをラベルの位置に貼り付けて『メニューを保存』をクリックすれば完成です。
※しかし表示してみるとhomeのアイコンだけ、他のと比べて少し小さいのが気になります。
そこでひと手間。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/75a8d4934c63b4e2ea5d8ca16ee3a5b3.png)
step
6もう一度メニューの画面を開いてfa-lgを追記
<i class="fa fa-home" aria-hidden="true"></i>の『fa-home』の後ろに『 fa-lg』を追記
↓
<i class="fa fa-home fa-lg" aria-hidden="true"></i>こうです。
※間に半角スペースを忘れずに!
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/40c4d370259ecfabf32bf2830d18e0d9-1024x477.jpg)
・すると少し大きくなり、このようにいい感じになります。
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/ec4fc62a33a65f974b5de5015cf979c9.png)
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/7eea0ec1e878a783f9a7b8b553f22f0a.png)
↓
![](https://yodaredoriblog.com/wp-content/uploads/2020/10/e002534885caeefaa671dde18d0ff280-e1601559929325.png)
![](https://yodaredoriblog.com/wp-content/uploads/2020/12/IMG_8805-2-e1608991048560-300x290.png)
これは自己満足の世界かなw
フォントのサイズを変えたい時は後ろにこちらを貼り付ければ変えられます。
- fa-lg (1.3倍)
- fa-2x (2倍)
- fa-3x (3倍)
- fa-4x (4倍)
- fa-5x (5倍)
![](https://yodaredoriblog.com/wp-content/uploads/2020/12/IMG_8805-2-e1608991048560-300x290.png)
バランスをみながら調節してみてね!
まとめ:簡単にオシャレになるのでオススメ
アフィンガー5では、このようにテーマを簡単にカスタマイズすることが出来ます。>>【おすすめテーマ】10分で出来る!アフィンガー5の購入方法
コードと言われると難しく感じるかもしれませんが、コピペだけで大丈夫なので初心者でも安心してできると思います。
ちょっとしたことですが、他の人と差をつけて自分だけのブログを作ってみてください。