【WordPress】メニューにFontAwesomeアイコンを表示!

★記事が気に入ったらシェアお願いします★

fontawesome-icon-0

ナビゲーションメニューにFontAwesomeのアイコンを表示したい!

ナビゲーションバーも項目が増えてきたのですが、文字ばっかりで判りにくいって思いませんか!?

そこでアイコン等を入れたいのですが、画像だとどうすれば良いのか判らない・・・

そうだ!アイコンとかのフォントがあったはず!
アレを入れられれば一発解決・・・

と思い探してみました♪

そして見つかりました!

ナビゲーションメニューにFontAwesomeのアイコンを入れられるプラグインが。

“Font Awesome 4 Menus”という名前です。

  Font Awesome 4 Menusをインストール

ではいつも通りインストールを行います。

WordPressのダッシュボードから、“プラグイン”“新規追加”と選択していきます。

右上の検索窓で“Font Awesome 4 Menus”と入力し検索。

“今すぐインストール”をクリックしインストールします。

fontawesome-inst1

 

インストールしたら忘れずに“有効化”しておきましょう。

 

  Font Awesome 4 Menusの設定

基本的に設定はしなくて大丈夫です。

がしかし。Simplicityを使用している方は“Don’t load Font Awesome 4’s…”という所にチェックを入れておきましょう。

スタイルシートをどこから呼び出すか?の設定のようで、SimplicityではすでにFont Awesomeを呼び出しているので、それを使用します。

使用していない方はデフォルトで大丈夫です。

fontawesome-setting

 

次に左のツールバーから“外観”“メニュー”と選択します。

fontawesome-setting2

 

すると下の様な画面に移るので、右上の“表示オプション”というタブをクリックします。
項目が出てきたら、“CSSクラス”のタブにチェックを入れましょう。

fontawesome-setting3

 

以上で設定は完了です。

 

  アイコンの挿入

設定が完了したらアイコンを挿入してみましょう。

先ほどの“外観→メニュー”の画面で、現在使用しているメニューの詳細を開きます。
角メニューの右に三角のマークがあるので、それをクリックすると詳細が表示され、CSS classという項目が追加されているのが確認出来ます。
(“外観→カスタマイズ→メニュー”でも同様に使用できます。)

fontawesome-icon-1

 

ここに希望のFontAwesomeのアイコンのCSSクラスを入力する事で、メニューバーにアイコンを表示する事ができます。

ではCSSクラスの調べ方ですが、Font AwasomeのサイトのIconsという所から調べる事が出来ます。
http://fortawesome.github.io/Font-Awesome/icons/

(また、下のページではアイコン・CSSクラス・ユニコードを一覧で見る事が出来ます。
 どちらでも使いやすい方を使用して下さい。
 https://fortawesome.github.io/Font-Awesome/cheatsheet/

 

気になったアイコンを見つけたらクリックをして、CSSクラスを表示させます。

fontawesome-icon-2

 

下線を引いている所(今回の家のアイコンなら“fa-home”)がCSSクラスとなります。
他にもリンクタグやユニコードなんかも調べる事が出来るようです。

fontawesome-icon-3

 

このCSSクラス“fa-home”等を先ほどのメニューの詳細のCSSクラス欄に入力し、“メニューを保存”をクリックすると・・・

fontawesome-icon-4

 

下の様にメニューバーにアイコンが表示されます!

fontawesome-icon-5

 

これで視覚的に見やすくなったと思います♪

アイコンを探すのが少し大変ですが、かなり簡単に出来るのでこれで色々カスタマイズしちゃいましょう!

Facebookで“いいね”
スポンサーリンク

★記事が気に入ったらシェアお願いします★

★フォローはこちら★

onlineshop-banner-moba

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です