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

Lightningでは Font Awesome のアイコンフォントが使えますが、これが表示されなかったり、表示が □ とかになってしまう事があります。

そのあたりの経緯は下記に書いてあるので別途確認いただくとして、

https://ex-unit.nagoya/ja/archives/v-6-4-1

なぜ化けるのかと修正方法を改めて説明します。

なぜ正しく表示されないのか？

Font Awesome のバージョンとclass指定の記法が合っていない

まず、以前の Font Awesome 4.7 と Font Awesome 5 系は アイコンの種類を指定するclassの記述方法が以下に挙げるように違います。

	Font Awesome 4.7	Font Awesome 5 以降
	fa fa-arrow-right	fas fa-arrow-right
	fa fa-arrow-circle-o-right	far fa-arrow-alt-circle-right
	fa fa-twitter	fab fa-twitter

サイトで読み込んでいる Font Awesome のバージョンが 5系 なのに 4.7 の記法で書かれていたり、その逆だったりという事が文字化けの原因です。

バージョンが合わなくなる経緯

先述の通り、バージョンによって記法が違う事から、LightningやExUnitで採用する Font Awesome のバージョンを 4.7 → 5 に変更してしまうと稼働中のサイトで軒並みアイコンが文字化けする事から 4.7 のままにするつもりでした。

しかしながら、そこは拡張性の高いWordPress。Font Awesome 5 を読み込んで上書きしてくるプラグインが増えてきたのです。

Lighnting が Font Awesome 4.7 だからと 4.7 の記法で書いていると、実際にはプラグインから 5 系に上書きされて、5系の記法でないと文字化けするという現象が発生するようになります。

そういう状況になって来たため、ユーザーが利用するFont Awesome のバージョンを選択できるように Lightning 及び ExUnit は Font Awesome のバージョン切り替え機能が実装してあります。

外観 > カスタマイズ 画面で Font Awesome パネルから変更する事ができます。

Lightnning & ExUnit 固有の記法の違い

また、Lightning 及び ExUnit では、ウィジェットなどで Font Awesome の class名を入力する欄がありますが、4.7系と5系で書き方が異なります。

4.7 は上記の表を確認すると、最初が全て fa となっています。

よって、class=”fa fa-arrow-right” の場合、システムで class=”fa ★★★★” と書き出していたので、4.7系ではユーザーは『fa』を記入する必要はなく、★の部分だけを入力するという方式でした。
※本文中に i タグを含めて直接コードを記述する場合はfaも必要

しかし、5系 は fa 固定ではなく、アイコンの属性によって fas / far / fab など変化するので、class=”■■■ ★★★★ ” という形で、5系を利用のユーザーは fasやfabなども含めて記述しないといけません。

修正方法

文字化けが発生してしまっている場合、以下の方法で修正を試みてください。

A : 5系の記述ですべて設定しなおす

本来は Font Awesome の指定バージョンを 5系に変更して、文字化けしている箇所のアイコンのclass指定を5系の記述に書き換えるのがお勧めです。

但し！4.7で上書きしてくるプラグインが存在します！

カスタマイズ > Font Awesome で5系を指定し、5系の記述をしているのに文字化けする場合は、プラグインが4.7系で上書きしてきている場合があります。

そういった場合はプラグインを一つずつ停止して原因となるプラグインをつきとめ、そのプラグインの利用停止などを検討してください。

B : 諦めて4.7系のまま運用する

5系に以降するのが面倒な場合は、外観 > Font Awesome を 4.7 にして従来通り凌ぐというのも一つの手ですが、プラグインで強制的に5系で上書きしてくるものも出てきてるので、いずれどこかのタイミングで5系への切り替えを余儀なくされると思います。

C : 自力で上書きする

Font Awesome 5系で各種設定したのに 4.7 で上書きしてくる不届きなプラグインがある場合は…そのプラグインが吐き出している Font Awesome の読み込み部分をフィルターフックなどを使って停止するか、CSSで強制的に font-family を指定する事になりますが、そこは該当プラグインによって処理がそれぞれ異なったり、専門的な知識が必要で説明しきれないので割愛します。

もし文字化けが発生したら、上記確認の上、Font Awesome のバージョン指定とclassの指定方法が合っているか改めて確認・修正してください。

この記事を書いた人

石川栄和代表取締役

名古屋のウェブ制作会社数社に10年程度務めた後、株式会社ベクトル設立。
企画・運営・コンサルティング〜WordPressを中心としたシステム開発まで幅広く携わる。
[ 著書 ]
・いちばんやさしいWordPressの教本（共著）
・現場でかならず使われているWordPressデザインのメソッド（共著）
[ 最近のWordPressコミュニティでの活動 ]
WordCamp Tokoy 2023 セッションスピーカー
WordCamp Asia 2023 セッションスピーカー（LT）
WordCamp Niigata 2019 セッションスピーカー
WordCamp Haneda 2019 セッションスピーカー
WordCamp Osaka 2018 セッションスピーカー
WordCamp Kyoto 2017 セッションスピーカー
他

最近の投稿

• WordPress2025年4月9日AIコーディング時代の到来によって手を動かすだけのエンジニアは完全に淘汰されるのか？
• WordPress2024年12月25日2024年リリースのイチオシ機能を一挙紹介！
• WordPress2024年12月1日ベクトル製品リリースタイムラインから見る開発の裏話と進化の歴史
• WordPress2024年10月30日ブロックテーマで編集権限のユーザーでもメニューを編集できるようにする