ヘッダーナビゲーションメニューにアイコンを設定

シェアする

  • このエントリーをはてなブックマークに追加
のんびりママの気になる木  主婦ブロガーのワードプレスカスタマイズ・アフィリエイト・育児など日記・楽書(4)

ヘッダー画像下のナビゲーションメニューを変えます。
表示項目が多くなり、文字がくっついて、見づらく感じました。
項目ごとに、イメージのアイコン画像にして、わかりやすくすることにしました。

スポンサーリンク

Font Awesome 4 Menus

プラグインを使います。新規追加 ⇒ 検索して、インストール⇒有効化

設定で赤丸の部分を☑します。これは、Simlicityのフォーラムのやりとりを参照しました。

SimplicityでFont Awesomeのスタイルシートを呼び出しているので「Load Font Awesome 4 From:」は、「Don’t load Font Awesome 4’s stylesheet (use this if you load Font Awesome 4 elsewhere on your site)」を選択してください。

Font Awesome 4 Menus ‹ のんびりママの気になる木 — WordPress

メニューで設定

外観 ⇒ メニュー ⇒ メニュー名を選択します。

メニュー ‹ のんびりママの気になる木 — WordPress

上部の表示オプションを出します。その中の 詳細メニュー設定を表示
cssクラスに☑を入れます。

各項目ごとに設定していきます。css class(オプション)のボックスが表示されます。

メニュー ‹ のんびりママの気になる木 — WordPress(1)

Font Awesomeのページからアイコンを選びます。

たくさんあって迷いましたが、一応、項目と合った画像を選びました。

どうでしょう? (^_^;)

選んだコードをcss class(オプション)のボックスにコピーします。

Font Awesome Icons

fa-heartbeat- Font Awesome Icons

こんな感じのメニューバーに変更されました。

のんびりママの気になる木 主婦ブロガーのワードプレスカスタマイズ・アフィリエイト・育児など日記・楽書(4)

画像が、ちょっとくどいかなぁ。でも、見やすくなったと、個人的には思います(*^_^*)

トップへ戻る