WordPressのメニューにFont Awesomeアイコンを表示

WordPress

2018.07.08 2017.07.19

おしゃれなブログや、わかりやすいHPをみると、グローバルメニューにアイコンフォントを表示させているサイトがおおいですよね。これって、大変難しいのかと思ってましたから、Font Awesome 4 Menusというプラグインを使用すると結構簡単にできました。

ただ、似合うアイコンを探すのには結構時間かかりましたけど。

アイコンフォント自体は、Font Awesomeのアイコンフォントを使用しています。色々なアイコンが文字として使えるので、大きさや、色、動きなども出来るようになっていて便利です。
今回は、Font Awesomeのアイコンフォントをグローバルメニューに表示させる方法を紹介します。

Font Awesome 4 Menusプラグインのインストール
Font Awesome 4 Menusの設定内容
1. Font Awesome Stylesheetの設定
2. アイコンと文字の間にスペースを入れる場合の設定
本文中で使う場合
1. アイコンの大きさを変えるには
まとめ

Font Awesome 4 Menusプラグインのインストール

　管理メニューから、プラグインをクリック

　新規追加から「Font Awesome 4 Menus」と入力します。

　今すぐインストールをクリック

インストールが終わったら、有効化をクリックします。

WordPress側の設定

管理画面の外観→メニューをクリック

上の方に、表示オプションという項目があるのでクリック

CSSクラスにチェックをいれます。

WordPress側の表示オプションの設定は、これだけです。

メニューにFont AwesomeのCSSクラスを記入

いよいよ、グローバルメニューにFont AwesomeのアイコンのCSSを入力していきます。

その場所を説明します。

　各メニューのカテゴリーの右横の▼をクリックします。

ここにFont AwesomeのCSSクラスを記入します。

Font AwesomeのアイコンのCSSをコピー

Font Awesomeにアクセスし、アイコンを選びます。

アスセスすると、こんな感じにアイコンが600個以上ならんでいます。

お目当てのアイコンがあったら、それをクリックします。

一覧からアイコンを選択してクリックすると、こんな画面が出るので、この例だと

fa-pencilをコピーします。

メニューのCSSクラスに貼り付け

　Font Awesomeのクラス名を貼りつけます。

メニューの設定が終わったら「メニューの保存」ボタンを押してください。

使用したアイコンのCSS

メモ代わりに使用したアイコンのCSSも書いておきます。

名称については、適当につけてます。

クラスは、グローバルメニューで使用します。タグは文中にアイコンを表示する時に使用します。

icon	名称 Unicode	クラス	タグ
	pencil ¥f040	fa-pencil	<i class=”fa fa-pencil” aria-hidden=”true”></i>
	road ¥f018	fa-road	<i class=”fa fa-road” aria-hidden=”true”></i>
	angellist ¥f209	fa-angellist	<i class=”fa fa-angellist”></i>
	eye ¥f06e	fa-eye	<i class=”fa fa-eye” aria-hidden=”true”></i>
	指差し右 ¥f0a4	fa-hand-o-right	<i class=”fa fa-hand-o-right” aria-hidden=”true”></i>
	レンチ ¥f0ad	fa-wrench	<i class=”fa fa-wrench” aria-hidden=”true”></i>
	bicycle ¥f206	fa-bicycle	<i class=”fa fa-bicycle” aria-hidden=”true”></i>
	info ¥f05a	fa-info-circle	<i class=”fa fa-info-circle” aria-hidden=”true”></i>
	はてな ¥f042	fa-question-circle-o	<i class=”fa fa-question-circle-o “></i>
	足跡 ¥f1b0	fa-paw	<i class=”fa fa-paw”></i>
	音符 ¥f001	fa-music	<i class=”fa fa-music”></i>
	メール ¥f003	fa-envelope-o	<i class=”fa fa-envelope-o” aria-hidden=”true”></i>
	手ポイント ¥f25a	fa-hand-pointer-o	<i class=”fa-hand-pointer-o” aria-hidden=”true”></i>
	wordpress ¥f19a	fa-wordpress	<i class=”fa fa-wordpress”></i>
	買い物 ¥f290	fa-shopping-bag	<i class=”fa fa-shopping-bag”></i>
	下矢印 ¥f0ab	fa-arrow-circle-down	<i class=”fa fa-arrow-circle-down”></i>
	サーバーラック ¥f233	fa-server	<i class=”fa fa-server”></i>
	サイトマップ ¥f0e8	fa-sitemap	<i class=”fa fa-sitemap”></i>
	スピナー読込中 ¥f110	fa-spinner	<i class=”fa fa-spinner”></i>
	葉っぱ ¥f06c	fa-leaf	<i class=”fa fa-leaf”></i>
	タグ ¥f02b	fa-tag	<i class=”fa fa-tag”></i>
	リスト ¥f03a	fa-list	<i class=”fa fa-list”></i>
	パソコン ¥f108	fa-desktop	<i class=”fa fa-desktop”></i>
	キーボード ¥f11c	fa-keyboard-o	<i class=”fa fa-keyboard-o”></i>
	チェック ¥f00c	fa-check	<i class=”fa fa-check”></i>
	鉛筆四角 ¥f14b	fa-pencil-square	<i class=”fa fa-pencil-square”></i>
	エンヴィラギャラリー ¥f299	fa-envira	<i class=”fa fa-envira”></i>
	電話 ¥f098	fa-phone-square	<i class=”fa fa-phone-square”></i>
	タブレット ¥f10a	fa-tablet	<i class=”fa fa-tablet”></i>
	ナビメニュー ¥f0c9	fa-navicon	<i class=”fa fa-navicon”></i>
	顔 \f118	fa-smile-o	<i class=”fa fa-smile-o”></i>

” aria-hidden=”true”　の意味は、スクリーンリーダー等で読み上げをスキップする方法として指定してあるようです。これはなくてもアイコンとして表示するだけならば問題ありません。

Unicodeの¥マークは、欧文フォントなので、¥マークを「¥」の文字実体参照の表記であらわしています。普通は　\　で表されてしまいます。

アイコンを探すのが結構大変なので、下記のサイトを参考にして探すと見つけやすいです。

参考Font Awesome のアイコンを日本語で検索し Unicode が分かるように一覧化してみた

Font Awesome 4 Menusの設定内容

管理メニューの設定をクリックして、

Font Awesomeをクリック

Font Awesome Stylesheetの設定

Font Awesomeのスタイルシートの呼び出しについて設定します。

Load Font Awesome 4 Fromの項目で以下が設定できます。

　プラグインのローカルフォルダ。通常はこのままでOKです

　Font AwesomeのオフィシャルCDMサーバーから取得　

　ユーザーが設定した任意の場所　

　Font Awesomeスタイルシートを使用しない。

私は、既にテーマなどで既に呼び出しているのでこちらにチェックを入れました

アイコンと文字の間にスペースを入れる場合の設定

グローバルメニューのアイコンと文字との間にスペースを入れる場合には以下にチェックをつけます。(私が設定を見た時には最初からチェックが入ってました)

本文中で使う場合

「Font Awesome 4 Menus」は、メニューにアイコンを表示させるだけではありません。
記事の本文中でも[fa class="fa-○○○"] でかこう、ショートコードで使用できます。

ビジュアル編集で書く

この方法は、大きさを変える時にも便利です。[fa class="fa-leaf fa-3x"]などと書いてあげると、となります。

アイコンの大きさを変えるには

アイコンの大きさを変えてみましょう。文章中などで使う場合には必要ですよね。
クラスにスタイルを追加します。例えば2倍ならば、fa-2x　を追加するとサイズを大きくすることができます。

テキスト画面で書く

fa-lg (1.33倍)
fa-2x (2倍)
fa-3x (3倍)
fa-4x (4倍)
fa-5x (5倍)

アイコン表示

(1倍)

(1.33倍)

(2倍)

(3倍)

(4倍)

(5倍)

アイコンを回転させるには

アイコンを回転させるには fa-spinというスタイルを追加すると出来ます。

テキスト画面で書く

アイコン表示

小さいとわかりずらいので、3倍の大きさにしています。

色をつけるには

通常は、スタイルシートに色を指定しておきます。

私は、メンドクサイのでHTMLで1行ですましています。

これだと、CSSに色を追加しなくても好きな色に出来るからです。

テキストでの書き方

red #ff0000	orangered #ff4500	yellow #ffff00	deeppink #ff1493	coral #ff7f50
aliceblue #f0f8ff	lightsteelblue #b0c4de	royalblue #4169e1	midnightblue #191970	blue #0000ff
chocolate #d2691e	darkolivegreen #556b2f	purple #800080	gray #808080	olive #808000
lime #00ff00	darkcyan #008b8b	pink #ffc0cb	sienna #a0522d	moccasin #ffe4b5