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

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

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

カスタマイズ箇所グローバルメニュー
カスタマイズ方法CSS
テンプレート変更なし
コピペの可否90% 可能

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

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

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

見やすく使いやすいサイトになるように、グローバルメニューに 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 を追加し、メニューテキストの開始位置を揃えます。完全レスポンシブ表示が有効でも無効でも、子テーマの style.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 で指定するといいでしょう。 CSS の場合には、 id より class での指定がおすすめです。


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

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

Facebook ページにいいね!をする
Twitter でフォロワーになる

シェアする

URL をコピーする

コメント

  1. CHAN より:

    こんにちは。おせわになってます。

    Simplicityでメニューにカラーアイコン使わせて貰ってます。
    プラグインが一つ減って助かりました。

    こちらはcocoonでも、利用可能でしょうか?
    Local by Flywheeのローカル環境で検証しているのですが、アイコンが表示してくれません。
    本番環境でないので、違うのかもいれないです。

    もう一つ質問なのですが、文章中などで、Font Awesomeの色を
    cssを使わないで表示させる方法があれば教えて貰えると幸いです。

    • Akira より:

      こんにちは。

      ご質問 1 : Cocoon でも利用可能か?

      Cocoon でも使えますが、 CSS の変更が必要です。もし、 Cocoon の高速化設定の「 CSS 縮小化」が無効であれば、下記の CSS でアイコンが表示されます。

      .item-label:before {
        display: inline-block;
        font: 24px/1 FontAwesome;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
      
      .menu-item:nth-child(1) .item-label:before {
        content: '\f015';
        color: #e91e63;
      }
      
      .menu-item:nth-child(2) .item-label:before {
        content: '\f06b';
        color: #ff9800;
      }

      もし、高速化設定の「 CSS 縮小化」が有効であれば、 :nth-child ではなくメニューの id を使います。( .navi-in > ul li の li の id 。)

      .item-label:before {
        display: inline-block;
        font: 24px/1 FontAwesome;
        margin-right: 4px;
        position: relative;
        top: 2px;
      }
      
      #menu-item-49 .item-label:before {
        content: '\f015';
        color: #e91e63;
      }
      
      #menu-item-50 .item-label:before {
        content: '\f06b';
        color: #ff9800;
      }

      現在の Cocoon では、「 CSS 縮小化」と :nth-child の相性が良くないんです。

      ご質問 2 : CSS を使わず色を表示する方法

      これはおそらく無理です。どうしても CSS の指定は必要だと思います。

      もし、色を使い分けるためのご質問であれば、下記のように HTML に class 名(下の例では red )を追加されてはいかがでしょうか。

      HTML 。

      <i class="red fa fa-envelope-open" aria-hidden="true"></i>

      CSS 。

      .red {
        color: red;
      }
  2. CHAN より:

    Akiraさん、回答ありがとうございます。

    ようやく、1段目がきれいに出来ました。css高速化をきらない方法です。

    ここで、解決出来ない問題が出来ました。
    サブメニューを#menu-item ナンバーで指定しても、しなくても、何故か1段目のアイコンがサブメニューに表示されます。

    ローカルだからなのか、サブメニューがあるカテゴリーは2段目に表示されて、通知エリアを隠すように表示されます。そして、上の段のアイコンが表示されるのです。

    何か、確認したら良い部分とかありましたら、教えていただけると幸いです。

    • Akira より:

      メニューを階層化されていらっしゃるなら、下記のように子セレクタで指定する必要があります。

      #menu-item-49 > a > .caption-wrap > .item-label:before {
        content: '\f015';
        color: #e91e63;
      }

      子孫セレクタ( > がない書き方)の場合には、 #menu-item-49 の子要素にある全ての .item-label に CSS が効いてしまうんです。そのため、親メニューのアイコンが、子メニューにも表示されます。

  3. CHAN より:

    Akiraさん、ようやく、子メニューまで出来ました。

    コメントをつけてないと、訳わからなくなるので切換え前に出来て良かったです。

    ありがとうございました。