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



 

Narumiのアイコン画像Narumi

 

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

 

 

MENU

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 ワールドクリエイター

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

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

そんな中で得てきたことや私流の自分らしく生きる方法論をこのブログを通して発信しています。「一度きりの人生」あなたも私と一緒に謳歌しませんか?

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

MENU
閉じる