Snow Monkey v6以降の「軽量な FontAwesome」設定について

本記事は、Snow Monkey の設定の1つ「軽量な FontAwesome」とは、どのような設定なのか解説しています。

本記事の対応バージョンについて

本記事の対応バージョンについて

WordPressテーマ「Snow Monkey v6以降」に対応しています。
Snow Monkey v9で確認しています。

「軽量な FontAwesome」設定について

Snow Monkey v6 以降、カスタマイザーの「ページ速度最適化」から「軽量な FontAwesome を使用する」の設定が追加されました。この設定を有効化した場合、 Font Awesome のアイコンは Snow Monkey テーマで使われているアイコンのみを読み込むようになります。

設定を有効化している場合のメリット

テーマで使用していない不要なFont Awesomeのアイコンリソースが読まれない事で、ページ読込みに必要なダウンロード容量が減ります。
その結果、ページ読込みの速度が向上します。

ルミェール

Snow Monkey公式の情報によれば、約1MBほどの軽量化をしてるそう。意外と大きい!?

ブリエ

そこまで軽くなるなら最初から「軽量な FontAwesome」の設定を有効化の状態にしていればいいのに。

テネーブル

そう言う訳にもいかないデメリットもあるんです。詳しくは、次の項目を見てみましょう。

設定を有効化している場合のデメリット

ブリエ

あれ?ブロックで指定しているアイコンが表示されなくなってる!?プラグインの画面もアイコンが出ないや。これって…

テネーブル

それが、この「軽量な FontAwesome」設定を有効化した時に起こるデメリットです。この設定をした場合は、テーマで使用していない Font Awesome のアイコンを読み込まないようになっています。その為、読み込れなくなったアイコンをブロックや他のプラグインが使用しようとした場合には正しく表示されないなどの問題になる場合があるんです。

例えば、Ghost Kit のプラグインでは、Icon Boxブロックに FontAwesome を使用するようになっています。

そう言った FontAwesome を使用するプラグインを有効化する場合は、通常の FontAwesome を読み込めなくなる為にアイコンが正しく表示されない問題が起こります。その為に、その場合は Snow Monkeyのカスタマイザーで 「軽量なFontAwesome を使用する」の設定を有効化しないようにしましょう。

ルミェール

プラグインが使用するFont Awesomeアイコンを追加すれば正しく表示されるけど、ほとんどの場合は難しいよ。解らない場合は「軽量なFontAwesome を使用する」の設定を有効化するのを避けるのも考えてみてね。

設定を有効化している場合に表示されるアイコン一覧

「軽量なFontAwesome を使用する」設定を有効にしている場合、次の一覧に記載しているアイコンのみが正しく表示されます。それ以外の FontAwesomeアイコン は 本記事の「設定を有効化している場合のデメリット」に記載にした通り正しく表示されなくなりますので、ご注意ください。

ルミェール

FontAwesomeの name と class で記載しているよ。

ソーシャルナビゲーションのアイコン表示に対応しているサービスブランドのアイコン (fab)
詳しくは「Snow Monkeyテーマのソーシャルナビゲーションの対応サービス一覧」をご覧ください。

clock(far)

user(fas)

times(fas)

sync-alt(fas)

star-half-alt(fas)

star(fas)

search(fas)

lightbulb(fas)

key(fas)

hand-point-right(fas)

globe(fas)

folder(fas)

exclamation-circle(fas)

envelope(fas)

edit(fas)

chevron-up(fas)

chevron-circle-right(fas)

check-square(fas)

check-circle(fas)

check(fas)

arrow-right(fas)

arrow-circle-right(fas)

arrow-alt-circle-right(fas)

exclamation-circle(fas)

angle-right(fas)

angle-left(fas)

angle-down(fas)

angle-double-right(fas)

ブリエ

Snow Monkeyテーマ や Snow Monkeyのアドオンプラグイン で使われているアイコン以外は、正しく表示されなくなる感じですね。

テネーブル

そうですね。 Snow Monkey 関連で使用されているアイコン以外は読み込まれなくなってますので、矢印も下方向の矢印はページトップボタンで使われるために表示できますが、上方向の矢印などはありません。その辺りも使用する場合は注意が必要です。うっかり、全方向の矢印アイコンがあると思って使用すると、表示されないことになります。

補足

ケミ

読み込まれているアイコンの定義は、Snow Monkeyテーマの src/js/fontawesome.js に記述されています。但し、faAngleDoubleRight 等の名称で定義されているので、要注意。それがビルドされた結果が assets/js/fontawesome.min.js になっています。カスタマイズを理解する場合には、両方のファイルを見てみると解りやすいです。

この記事の筆者

Kmix39(ケミ)

電子の妖精。当ウェブサイトの記事制作などを行なっています。
金融・不動産・医療・教育などの数々の業種のシステム開発を経験を積み、スマートフォンアプリケーションと WordPress などのウェブアプリケーションを日々勉強中。