Luxeritas(ルクセリタス)でマテリアルアイコンが標準化!Font Awesomeアイコンが表示されない?
ワードプレスの無料人気テーマLuxeritas(ルクセリタス)の3.18.0リリースに伴い、標準アイコンがGoogleマテリアルアイコンに変更となりました。
従来はFont Awesomeが標準でしたので、手動でカスタマイズしている部分はアイコンが表示されない、といった不具合が発生します。
そこで本記事では次の内容を紹介します。
・引き続きFont Awesomeを使用継続したい場合の設定方法
・Font AwesomeからGoogleマテリアルアイコンへ変更する方法
(マテリアルアイコンのCSS設定方法)
Googleマテリアルアイコンとは
Googleが無料で提供するアイコンサービスです。
Google Fontsの一種として提供されていますので、CSSで色やフォントサイズ・フォント太さなどを調整することができます。
アイコンというとFont Awesomeが定番ですが、
・version4→5と進化と同時に少しだけ重くなった
・使用開始には登録が必要
・version6ではサブスクに移行する
といった事情から、今後はGoogleマテリアルアイコンを使うことが増えそうですね。
Luxeritasのversion3.18.0からマテリアルアイコンが標準採用
作者のるなさんによると、高速表示をモットーとするLuxeritasでは、Font Awesomeを無効化しGoogleマテリアルアイコンを標準アイコンに変更することで、より高速化を実現したとのこと。
この変更により、テーマLuxeritasで自動的に表示されるアイコンは、Googleマテリアルアイコンで表示されることとなりました。
Font Awesome無効化により表示されないアイコンに注意!
しかし、カスタムCSSなどを使って手動でFont Awesomeアイコンを表示していた場合は、表示されなくなるので注意が必要です。
例えば、このウェブチルサイトでも見出しの頭にはFont Awesomeでアイコン表示させていましたが、バージョン3.18.0にアップデートすると表示されなくなりました。

アイコンが消えた場合の対処方法
対処方法としては大きく2つあります。
- Font Awesomeを有効化して引き続きFont Awsomeアイコンを表示させる
- Font Awesomeの表示設定をやめてマテリアルアイコン設定とする
①の場合は、若干ですが表示速度が遅くなります。といっても、従来この方法でWeb表示させてきたわけですから、気にならないと思いますが。
②はCSSを書き換えるということなので手間が発生します。
多くのアイコン表示を自分でしていた場合は、それだけの手間が必要となります。
どちらを選ぶかは好みの問題です。
私はせっかくなので②の方法を取りましたが、以下①②の両方の設定方法を紹介します。
方法①:引き続きFont Awesomeで表示
ダッシュボードメニュー Luxeritas>カスタマイズ の”アイコンフォント”タブを開きます。
(バージョン3.18.0以前では“Font Awesome"タブだったページです。)

上記のように、デフォルトではMaterial iconsにはチェックが入っていますが、Font Awesomeのチェックが外れています。
このFont Awesomeにチェックを入れれば、消えていたアイコンが再び表示されるようになります。
(Font Awesome4か5かは使用状況に応じて自分で選んでください。)

マテリアルアイコンとFont Awesomeの併用をするかどうか
Font Awesomeにチェックをいれる場合、さらに選択肢は2つの分かれます。
- Material iconsとFont Awesomeの両方にチェックを入れる
→テーマで自動表示アイコンはMaterial icons、Font Awesome手動設定したアイコンはFont Awesomeで表示される。 - Material iconsのチェックは外してFont Awesomeのみにチェックを入れる
→すべてのアイコンが従来通りFont Awesomeで表示される
①は潤沢に両方のアイコンを使用するので、一番表示が遅くなります。
したがって、Font Awesomeの使用を継続する場合は②のようにMaterial iconsのチェックは外すのがよいでしょう。
方法②:Font Awesomeをやめてマテリアルアイコンへ変更する
この場合は、Font Awesomeアイコン表示をさせていたCSSをマテリアルアイコン表示のCSSに書き換えることとなります。
具体例として先にあげたウェブチルサイトの投稿用見出し2の場合を紹介していきましょう。
1.もともとFont Awsesome表示していたアイコン
元々、見出し2はFont AwesomeのCSS用コード”f044”のアイコンを使用していました。

CSSで”f044”を指定して部分を、後ほどマテリアルアイコンの新しいCSSに置き替えます。
2.マテリアルアイコンのコードをCSS取得
マテリアルアイコンの一覧表から、新しいアイコンを選びます。
今回は次のアイコンを選んでクリックします。

次の画面で、Code pointからCSS用コード”e3c9”をコピーします(赤字表示の部分)。

緑字は今回関係ないので使いませんが、一応参考情報として記載しておきました。
CSSでなくHTMLとして表示させる場合や、ダウンロードしてサーバーにアップロードする方法も使えるということです。
3.取得したコードを使ってCSSを書き換え
CSSを以下のように書き換えました。
Font Awesome設定のCSS
.single .post h2 {
color :#2B2C42;
position: relative;
background: #EEF9FF;
padding: 0.25em 0.5em;
border-bottom: double 0.3em #91C4C7;
border-top: double 0.3em #91C4C7;
border-left: solid 2em #91C4C7;
}
.single .post h2:before {
display: inline-block;
font-family: "Font Awesome 5 Free";
content: "\f044";
position: absolute;
padding: 0em;
color: #2B2C42;
font-weight: 900;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
マテリアルアイコン設定のCSS
.single .post h2 {
color :#2B2C42;
position: relative;
background: #EEF9FF;
padding: 0.25em 0.5em;
border-bottom: double 0.3em #91C4C7;
border-top: double 0.3em #91C4C7;
border-left: solid 2em #91C4C7;
}
.single .post h2:before {
display: inline-block;
font-family: "Material Icons";
content: "\e3c9";
position: absolute;
padding: 0em;
color: #2B2C42;
left: -1.35em;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
変更した要点を赤字で表記してみました。
アイコン変更は疑似要素:beforeへ適用したCSSを書き換えることとなります。

・font-familyをMaterial Iconsに変更
・contentを取得したe3c9に変更
・font-weightはFont Awesomeでは必須でしたがGoogle Iconでは必須でないので削除。
以上で、見出しは次のように変更となりました。

同様の要領で、Font Awesomeで設定していたアイコンを全てマテリアルアイコンに変更します。
最後には必ずLuxeritasのFont Awesomeのチェックは外して無効化しておきましょう。
まとめ
Luxeritasのバージョン3.18.0から標準アイコンがGoogleマテリアルアイコンとなりました。
引き続きFont Awesomeを使う方法、マテリアルアイコンへの変更方法の2つを紹介しましたが、現在のところはどちらでも構いません。
私はGoogleマテリアルアイコンへ切り換えましたが、有料で多くの種類を使えるのはFont Awesomeなので、ご自分のサイトの目的に応じて選定すればよいでしょう。
また、Luxeritasのおすすめ機能を次の記事でまとめているので参考にしてくださいね。