【2026年最新版】Font Awesome 7 Free のアイコンをメニュー項目に表示するやり方
2026.3.4 Font Awesome 7 に対応した内容に書き換えました
Lightning Pro のアップデートを受けて、この記事の内容を Font Awesome 7 に対応した手順に書き換えました。
2024.6.5 スクリーンショット等を最新にしました
スクリーンショットや操作手順などを最新のものにアップデートしました。
2022.3.18 Font Awesome 6 に関する説明を追加しました
VK Blocks (Pro) / Lightning / Lightning Pro / Katawara で Font Awesome 6 が使えるようになったことを受けて、この記事に Font Awesome 6 に関する説明を追加しました。
デザインスキン Pale のヘッダーナビゲーションのアイコン
Lightning Pro で使えるデザインスキン Pale にはヘッダーナビゲーションのアイコンを設定できる機能があります。
この機能を使えばメニュー項目のアイコンをお手軽に設定できるので、カスタマイズに不慣れなユーザーにはうれしい機能です。
これ以外にも、Pale 以外のデザインスキンでも使える、とても便利な機能がありますので、この記事で紹介します。
Font Awesome でもっともっとたくさんのアイコンを使えます
Lightning / Katawara には Font Awesome 7 Free というアイコンフォントが組み込まれていて、2026年3月4日現在で 2,140個ものアイコンを無料で使うことができます。
Font Awesome サイト
Font Awesome 7 Free のアイコン検索はこちら：
https://fontawesome.com/search?ic=free-collection
メニュー項目にアイコンを設定する手順
メニュー項目「トップページ」に家のアイコンを追加する、以下の例で説明します。
1. アイコンを検索する
Font Awesome サイトで検索ワードの入力欄に home と入力して、見つかったアイコンの中から使いたいものをクリックします。
検索ワードで日本語は使えません。
2. アイコンのHTMLコードをコピー
<i class=”*** *******”></i> という文字をクリックします。
クリックするとすぐ上に Copied と表示されて、コピーできたことを確認できます。
3. メニュー編集画面に貼り付け
メニュー編集画面を開いて、先ほどコピーしたコードを以下の位置に貼り付けます。
アイコンと項目名の間を空けたい場合は、項目名の前に半角スペースを入れます。
この作業をそれぞれのメニュー項目について行って、メニューを保存すれば作業完了です。
アイコンの色を指定するには
以下の行を CSS に追加するとアイコンの色を指定できます。#****** はカラーコードです。
.gMenu_name i::before {
color: #******;
}【2021.4.14 追記】 Lightning G3 では CSS を以下のようにします。
.global-nav-name i::before {
color: #******;
}おまけ：Pale のアイコンの代用品
デザインスキン Pale のヘッダーナビゲーションのアイコンの代用になりそうなものおよびHTMLコードは以下の通りです。
Pale のヘッダーナビゲーションのアイコン設定機能はすべてのメニュー項目で同じアイコンしか使えませんが、Font Awesome アイコンを使えば個々のメニューを別々のアイコンにできます。
バージョン 5 から 6 への移行はかんたんでしたが…
Font Awesome 6 は Font Awesome 5 / 4 に対する後方互換性があり、Font Awesome 5 / 4 で運用していたサイトを Font Awesome 6 に移行するのはかんたん・スムーズにできました。詳しくは以下の記事をどうぞ。
これに対し、Font Awesome 7 は後方互換ではなくなり、さらに固定幅がデフォルトになりました。
font-family: "Font Awesome 6 Free"; を font-family: "Font Awesome 7 Free"; と書き換えないとアイコンが表示されなくなっている部分があります。
この影響で、CSS でカスタマイズしたサイトでレイアウトがくずれたり、アイコンが表示されなくなったり、という現象が起きています。
サイト運営者プロフィール
- 魚沼情報サービス・ベクトル公式テクニカルパートナー
-
【日本全国対応】WordPress のサイト制作、設定、カスタマイズ、トラブルでお悩み、お困りの方、ベクトル公式テクニカルパートナーがお手伝いいたします。
Lightning / VK Blocks / VK Filter Search のサポート、カスタマイズを得意としています。
遠方からのご依頼の場合、打ち合わせ・サポートを Zoom や電子メール・電話などを併用して行わせていただきます。
オンラインレッスン形式でのホームページ制作サポートも行っています。お客様ご自身でホームページを制作・運用する上でうまくいかない部分をサポートいたします。設定やカスタマイズを手伝ってもらいたい、同時に便利な使い方や設定方法、カスタマイズのやり方も知ることができたら...という方にご好評いただいています。
デザイナー様、制作業者様のサイト制作のお手伝いも数多く行っています。難しい部分のコーディング ( PHP / CSS / jQuery ) をやってほしい、いま人手が足りない等、お仕事の依頼をお待ちしています。
ご要望をうかがった上で費用見積り（無料）を提示させていただきますので、お気軽にお問い合わせください。
≫メールでのお問い合わせはこちら
最新の投稿
WordPress のトラブル解決・設定・カスタマイズ
ベクトル公式テクニカルパートナー
があなたをお手伝いします
Zoom で画面共有してQ&A形式でサポートいたします。わからないところや疑問点をどんどん質問してください。その場ですぐに解決をお手伝いします。※ご希望の方にはメールでのサポートも可能です。
PHP / jQuery / CSS / アクションフック / フィルターフック のカスタマイズのご依頼も承ります。自分では思い通りにできないのでプロの力を借りたいとお考えの方、ぜひご相談ください。
