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

この記事のURLとタイトルをコピーする

この記事を読むのに必要な時間は約 7 分です。
(専門用語などにはポップアップする説明をつけているので時間が長く表示されることがあります。
ツールチップの機能については、こちら)

Lightningでは Font Awesome のアイコンフォントが使えますが、これが表示されなかったり、表示が □ とかになってしまう事があります。そういった場合の原因・修正方法と対策について解説します。

 目 次 

Font Awesome のバージョン変更について

テーマカスタマイズでの設定
Lightning 及び ExUnit では いろんなアイコンが簡単に使えるように アイコンフォントのライブラリ「Font Awesome」が予め利用出来るようになっています。その Font Awesome の 5 がリリースされていますが、4.7 からの移行は作業が必要となるため、そのまま運用されている方も多いですね。
しかしながら他のプラグインなどが Font Awesome5 を読み込んだりする事により、4.7 のクラス名のままだと正しくアイコンが表示されない現象が出てきたため、Lightning 4.4.0 及び ExUnit の 6.4.1 において Font Awesome のバージョンの切り替え機能を追加しました。
他のプラグインで Font Awesome を読み込まない場合は現状のままでも支障は出ませんが、出来るだけ順次 5.0 への切り替え作業をよろしくお願いいたします。
バージョンの切り替えはダッシュボードの【 外観 】>【 カスタマイズ 】からカスタマイザーを起動し、【 Font Awesome 】のセクションからバージョンを選択してください。

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

アイコンフォントの表示
Font Awesome のバージョンとclass指定の記法が合っていないからというのが大多数の原因である
まず、以前の Font Awesome 4.7 と Font Awesome 5 系は アイコンの種類を指定するclassの記述方法が以下に挙げるように違います。

Font Awesome 4.7
?fa fa-arrow-right
?fa fa-twitter
Font Awesome 5 以降
fas fa-arrow-right
fab fa-twitter

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

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

バージョン変更
先述の通り、バージョンによって記法が違う事から、LightningやExUnitで採用する Font Awesome のバージョンを 4.7 → 5 に変更してしまうと稼働中のサイトで軒並みアイコンが文字化けする事から変更直後は、修正が大変でした。最近では、Font Awesome 5 を読み込んで上書きしてくるプラグインが増えてきたのです。
Lightningが Font Awesome 4.7 だからと 4.7 の記法で書いていると、実際にはプラグインから 5 系に上書きされて、5系の記法でないと文字化けするという現象が発生するようになります。
幸いにもLightningにはバージョン変更がカスタマイザーで可能になっているので外観 > カスタマイズ 画面で 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なども含めて記述しないといけません。
フォントアイコンセットアップ

修正方法

文字化けが発生してしまっている場合、以下の方法で修正を試みてください。
5系の記述ですべて設定しなおす
本来は Font Awesome の指定バージョンを 5系に変更して、文字化けしている箇所のアイコンのclass指定を5系の記述に書き換えるのがお勧めです。
但し!4.7で上書きしてくるプラグインが存在します!
カスタマイズ > Font Awesome で5系を指定し、5系の記述をしているのに文字化けする場合は、プラグインが4.7系で上書きしてきている場合があります。
そういった場合はプラグインを一つずつ停止して原因となるプラグインをつきとめ、そのプラグインの利用停止などを検討してください。
逆に4.7に戻すというのは、おすすめしません。なくなる予定のバージョンに戻しても手間が増えるだけなので・・・


YouTubeチャンネル


 

チャンネル登録

 

WEBのことならくまはちLABにお任せください。

サービス 制作事例
お問い合わせ
LINEスタンプ
LINE@友だち追加
Vektor WordPress Solutions
Vektor WordPress Solutions

くまはちLABのご利用ありがとうございます!
くまはちLABの最新情報をフォローしてゲットしてください!