【lightning】簡単!ワードプレスのメニューにアイコン表示する方法

ホームページを作成していてメニューのHOMEをアイコンにしたいなと思ったことありますよね。
今回はとっても簡単にアイコン表示する一番簡単な方法をご紹介します。
テーマによってできない場合がありますのでご容赦ください。今回はテーマ「lightning]の場合です。

アイコンフォントの準備

まずはアイコンを探します。
今回はHOMEを家のアイコンに変えようと思います。
lightninngはfontawesome対応となっていますので一般的な形であればそのまま使うのがベターだと思います。

FontAwesome

FontAwesomeで使いたいアイコンを探します。
FontAwesomeはこちら

今回は家のアイコンを使いたいのでhome もしくはhouseと入力(英語対応です)

FontAwesomeのhomeのページはこちら

HTMLをコピーしておきます。

ワードプレスのメニューを編集

次にメニューの編集をします。

管理画面の「外観→メニュー」に進みます。
変えたい項目のナビゲーションメニューを消し先ほどコピーしておいた一文を張り付けます。

保存を忘れずに。
確認するときちんとアイコン表示されています。

まれに□表示されることがあります。その場合はプラグインの影響もあるようです。
また、lightningでないテーマの場合はFontAwesomeのバージョンと合わない場合もあるようです。
こちらを参照ください。

Lightningでアイコンフォントが 文字化けする原因と修正方法 

よかったらシェアしてね!

この記事を書いた人

目次
閉じる