グローバルメニューにアイコンを表示させる方法【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 でアイコンを探す

All of the Free and Pro icons available in Font Awesome 5

上のサイト(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を使っている方は一度お試しにいかがでしょうか。

スポンサーリンク
グローバルメニューにアイコンを表示させる方法【simplicityカスタマイズ】
この記事をお届けした
俺wiki.comの最新ニュース情報を、
いいねしてチェックしよう!
スポンサーリンク



シェアしてもらえると嬉しいです!

フォローはこちらから

スポンサーリンク