プラグインなしでメニューに Font Awesome アイコンを表示

Font Awesomeアイコンのあるメニュー

Akira

福岡在住ウェブデザイナー。 WordPress のカスタマイズを、「見やすさ」と「使いやすさ」にこだわり紹介しています。

メニューにアイコンを付けることで、サイト訪問者にメニュー内容を伝えやすくなります。

また、サイト訪問者はメニューの位置を覚えやすくなり、使い勝手のいいサイトになるのも魅力。

しかも、アイコンは CSS だけで簡単に表示できるため、サイト運営者にも優しい。

Simplicity がより見やすく使いやすくなるように、グローバルメニューに Font Awesome アイコンを表示してはいかがでしょうか。

ただ、「 Font Awesome 4 Menus 」などのプラグインの使用は、私はおすすめしません。

WordPress プラグインは、想像以上にサーバーに負荷をかけます。 CSS でできることまでプラグインに頼ってしまうと、サイトが遅くなってしまいます。

:before と :nth-child を使った CSS

Simplicity のグローバルメニューに、 CSS だけで簡単に Font Awesome のアイコンを表示するには、 2 つのセレクタ指定方法があります。

まずは、直感的に指定できる :before 疑似要素と :nth-child 擬似クラスを用いてみます。

以下の CSS を子テーマの style.css に追加します。

.menu-item > a:before {
  display: inline-block;
  font: 16px/1 FontAwesome;
  margin-right: 4px;
}

.menu > .menu-item:nth-child(1) > a:before {
  content: '\f015';
}

たったこれだけで、 1 つ目のメニューに Font Awesome のホームアイコンが表示されました。

1つ目のメニューに表示されたFont Awesomeのホームアイコン

\f015 は、ホームアイコンの Unicode です。 Unicode は、 Font Awesome の各アイコンページで確認できます。

Font Awesomeの各アイコンページより確認できるUnicode

2 つ目以降のメニューにもアイコンを表示させるには、 :nth-child を使って Unicode を追加していきます。

.menu-item > a:before {
  display: inline-block;
  font: 16px/1 FontAwesome;
  margin-right: 4px;
}

.menu > .menu-item:nth-child(1) > a:before {
  content: '\f015';
}

.menu > .menu-item:nth-child(2) > a:before {
  content: '\f06b';
}

.menu > .menu-item:nth-child(3) > a:before {
  content: '\f000';
}

.menu > .menu-item:nth-child(4) > a:before {
  content: '\f290';
}

.menu > .menu-item:nth-child(5) > a:before {
  content: '\f19c';
}

全てのメニューにアイコンが表示されました。

全てのメニューに表示されたFont Awesomeアイコン

2 つ目のメニューには :nth-child(2) 、 3 つ目のメニューには :nth-child(3) と、 :nth-child() の数字を変えます。

とても簡単でしょ?

アイコンのサイズを大きくする場合

上記の CSS では、 16px でアイコンを表示しています。

これを 24px にすると、メニューテキストとのバランスがちょっと崩れてしまいます。

アイコンを24pxにしたことでテキストとのバランスが崩れた例どこかおかしいアイコンとテキストのバランス

大きなアイコンを表示させる場合には、 .menu-item > a:before に変更を加えます。

.menu-item > a:before {
  display: inline-block;
  font: 24px/1 FontAwesome;
  margin-right: 4px;
  position: relative;
  top: 2px;
}

バランスの良いしっくりくる表示になりました。

位置を調整しアイコンとテキストのバランスを整えた例ちょうどいいバランス

position: relativetop: 2px を加えることで、アイコンが 2px 下がっています。

個別にアイコンに色を付ける

子ども向けサイトや料理系サイトなどでは、カラフルなデザインにすることがよくあります。

アイコンに色を付けて、華やかにしてみます。

例えば下記の CSS を指定すると…。

.menu-item > a:before {
  display: inline-block;
  font: 24px/1 FontAwesome;
  margin-right: 4px;
  position: relative;
  top: 2px;
}

.menu > .menu-item:nth-child(1) > a:before {
  content: '\f015';
  color: #e91e63;
}

.menu > .menu-item:nth-child(2) > a:before {
  content: '\f06b';
  color: #ff9800;
}

.menu > .menu-item:nth-child(3) > a:before {
  content: '\f000';
  color: #4caf50;
}

.menu > .menu-item:nth-child(4) > a:before {
  content: '\f290';
  color: #03a9f4;
}

.menu > .menu-item:nth-child(5) > a:before {
  content: '\f19c';
  color: #9c27b0;
}

ポップでカラフルなグローバルメニューになりました。

アイコンに個別の色を付けた例

お好きな色を color で 1 つ 1 つ指定します。

色選びは、マテリアルデザインの Color Tool がおすすめです。

モバイル時のメニューテキストの開始位置をきれいに揃える

パソコンで見た時には、これまでの CSS だけで十分です。

しかし、モバイルで見た時には、メニューテキストの開始位置が揃っていません。

アイコンの大きさが違うことでメニューテキストの開始位置が揃っていない例テキストの開始位置がバラバラ

これは FontAwesome のアイコンが、 1 つ 1 つ微妙に大きさが違うため。

そこで下記の CSS を追加し、メニューテキストの開始位置を揃えます。

@media screen and (max-width: 1110px) {
  .menu-item > a:before {
    text-align: center;
    width: 32px;
  }
}

すると、きれいに開始位置が揃いました。

CSSでメニューテキストの開始位置を揃えた例きれいに揃ったテキストの開始位置

width の値は、お好みの値で構いません。

id や class でアイコンを指定する

:before 疑似要素と :nth-child 擬似クラスで指定する方法は、 ほとんどコピペだけでできます。

また、メニューの順番どおりに指定するため、直感的にアイコンの Unicode を指定できるのもメリットです。

しかし、要素名が長くなるデメリットがあります。

特に子メニューにアイコンを表示する場合には、下記の CSS のようにセレクタが複雑です。

.menu-item:nth-child(1) .sub-menu .menu-item:nth-child(1) > a:before {
  content: '\f015';
}

1 つ目のメニューの 1 つ目の子メニューとの指定をしています。

セレクタを簡潔に指定したい場合には、各メニューに割り当てられた idclass を用います。

各メニューの idclass は、ブラウザのデベロッパーツールで把握できます。

デベロッパーツールで確認できるidとclass

例えば classmenu-item-91 で指定すると、セレクタが簡潔です。

.menu-item-91 > a:before {
  content: '\f015';
}

また、各メニューの順番を変更しても、 CSS で指定し直す必要がないのもメリット。

簡単にカスタマイズするよりも、 CSS の効率性を重視される方は、 idclass での指定がおすすめです。


メニューにアイコンを表示される方の中には、 1 行目にアイコンを、 2 行目にメニューテキストを表示したいとお考えの方もいらっしゃるかもしれません。

「メニューにサブメニューやアイコンをつけて 2 行で表示する方法」では、メニューを 2 行にする方法をご紹介しています。