* indicates required
   

【WordPressプラグイン】Font Awesome 4 Menusでメニューにアイコンを設定!サイトの印象を変えて、オリジナル感をアップ!

 

Narumi

 

WordPressのメニューバーにFont Awesomeのアイコンを表示させる方法について解説していきます。

 

 

Font Awesome 4 Menus をインストールしよう

 

  1. 「プラグイン」→「新規追加」Font Awesome 4 Menusを検索します。
  2. 「今すぐインストール」→「有効化」へ進みましょう。

 

 

Font Awesomeアイコンの設定方法

 

ダッシュボードの「外観」→「メニュー」をクリックします。

 

 

続いて、メニュ画面の右上にある「表示オプション」をクリックします。

 

 

表示されるアイテムの中の「CSSクラス」にチェックを入れましょう。

するとメニューの各項目に「CSS class(オプション)」という設定項目が追加されます。

 

 

メニューに設定するアイコンを選ぼう

 

次に、公式サイトからメニューバーに表示させたいアイコンを選んでいきます。

 icon-chevron-circle-right Font Awesome Icons

 

例えば、ホームアイコンを表示させたい場合はそのアイコンをクリックします。

 

 

するとアイコンの個別ページが表示されるのでアイコン名をコピーしましょう。

 

 

続いて、コピーしたアイコン名を「CSS class(オプション)」に貼り付けます。

Font Awesomeのアイコン名は、Font Awesomeのアイコンリストのページの名前の前に
fa-” を加えて “fa-(アイコン名)” という形で入力します。

 

入力を終えたら、「メニューを保存」をクリックし、設定は完了です!

 

 

こんな感じに設定したホームアイコンがメニューバーに表示されました✨

 

 

メニューにアイコンが表示されるだけで少し印象が変わりますね!

ブログがおしゃれになればオリジナル感を出すこともできるので、ぜひ試してみてください✨

 

記事内でもFont Awesomeアイコンを使えます!

 

ご紹介したプラグインのショートコードを使用して、記事や固定ページでもFont Awesomeのアイコンを使うことが出来るようになるので、ぜひ、活用してみてくださいね。

無料メールマガジンのお知らせ

* indicates required
   

ABOUTこの記事をかいた人

アバター

当ブログ管理人 / Narumi

大学を卒業後1年間ワーキングホリデーVISAで渡豪し、帰国後は地元の外資系企業に就職。就職半年目に将来に対して漠然とした不安を抱え、現状維持を打破したい、人生を変えたい、もっと自分らしい働き方を見つけたいという思いで副業を開始。

会社に勤めながらも睡眠時間数時間でオンラインビジネスに没頭したところ6ヶ月目に月収100万を達成。副業開始半年目に晴れて独立。


現在、海外で得た経験と感動をもとに『世界を舞台に自分らしく自由に生きる』をテーマにした、ワークスタイル.セカンド起業.独立起業を目指す人のためのオンラインビジネスサロン「Global Style」を主宰。二期目が活動中。ビジネスコンサルタント.コミュニティ運営.Webマーケター.Webライター.プロモーター.オウンメディア構築.クリエイター.海外事業など多岐にわたり活動を展開する。

これまでに多くの独立起業家を輩出し、100名を超えるクライアントの理想の働き方を実現するサポートに従事する。

   プロフィール詳細はこちら