【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のアイコンを使うことが出来るようになるので、ぜひ、活用してみてくださいね。

【無料】Narumiのメール講座

Narumi
 icon-check-circle-o 人生を変えたい、豊かにしたい、もっと自分らしく生きていきたい…
 

まずは1日5分で学べるメール講座から icon-envelope-o

人生をシフトするきっかけを掴んでみてください。



ABOUTこの記事をかいた人

アバター

当ブログ管理人のNarumiです。

もともと頻繁な海外旅行で貯金はほぼゼロ、
月収16万円、ボーナスなしの冴えないOLをしていました。

インターネットビジネスを始めてこつこつと実践を繰り返してきたところ、
収入が5倍となったのでOL生活に終止符を打ち、
晴れてフリーランスとなり人生を180°シフトすることに成功。

現在は、好きな時に・好きな場所で・気の合う人とだけ
自由なスタイルでシゴトもプライベートも楽しんでいます。

ビジネス経験、知識ゼロ、おまけに引きこもり状態から
這い上がってきた自らの経験をふまえて、
多くの人に「キッカケひとつで人生は変えられる!」ということを
コンサルティングやセミナー活動を通してお伝えしています。

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