グローバルメニューにアイコンを表示させる方法【simplicityカスタマイズ】

メニューにアイコンが付いているとお洒落で見栄えもよくなりますよね、どうやってアイコンを付けてるのか調べてみました。

プラグインを導入する事で簡単にアイコンを付けることができたのでメモ書きします。

Font Awesome 4 Menusとは

Font Awesome 4 MenusとはWord Pressのプラグイン。

特徴はグローバルメニューのナビゲーションラベルの横にアイコンを表示させることができます。

数百種類あるアイコンの中から選べて自由度がとても高いです。

簡単な手順

1. Font Awesome 4 Menusのインストール
2. Font Awesome　サイトで導入したいアイコンを探しクラス名のコピー
3. グローバルメニュー表示オプションからCSSクラスにチェックを入れ
4. メニュー構造のCSS class (オプション)にFont Awesome 2.でコピーしたコードを貼り付ける

プラグイン インストールから有効化

1. WordPress画面 プラグインの中から新規追加
2. Font Awesome 4 Menusプラグインをアップロードまたはキーワード検索
3. 今すぐインストール後「有効化」をクリック
4. 「有効」と表示が変わりインストールと有効化が完了

Font Awesome でアイコンを探す

Find Icons with the Perfect Look & Feel | Font Awesome

Used by millions of designers, devs, & content creators. Open-source. Always free. Check out the all-new Sharp Solid icons, available in Font Awesome 6 Pro.

fontawesome.com

上のサイト(Font Awesome icon)から好きなアイコンを探します。

試しにpaper-plane-oを選んでみました。

画像内のマウスドラッグされてる部分(グレー)のコード「fa-paper-plane-o」をコピーします。

グローバルメニュー 表示オプションの設定方法

Word Press編集画面から外観を選択後メニューを開きます。

上部の「表示オプション」を開きます。

CSSクラスにチェックを入れます。

続いてメニュー構造でアイコンを付けたいナビゲーションを開きます。

CSS class(オプション)にFont Awesomeでコピーをした「fa-paper-plane-o」を貼り付け、メニューの保存をします。

グローバルメニューにアイコンが表示されます。

Font Awesome 4 Menusを使った感想

ちょっとしたアクセントでサイトの雰囲気が変わり、Font Awesome 4 Menusを使うことで数百種類あるアイコンを簡単に導入できるのは嬉しいですね。

Word Pressを使っている方は一度お試しにいかがでしょうか。