Font Awesome5に切り替える時は正しい手順を踏まないと表示不具合出まくる説
とりあえず、Font Awesome5に切り替えた時の話をしてみます。
切り替えのやり方、というのは非常にシンプルで難しいことでも無いんですけど…ただ設定を誤ってしまった時のダメージが大き過ぎて。
ある程度丁寧に手順を解説してみますので「もうそろそろ切り替えよっかな…」と思っているあなたは是非とも参考にしていただきたいです。
ちなみにLuxeritas使用者への記事となりますので、別テーマを使っている場合は全く話が通じないとこも一部ありますことをご了承くださいまし。
Font Awesome5への切り替え方法
予備知識
事前に知っておきたい知識は、以下の通り。
- Font Awesome4と5は別物。共存出来ない。
- 上記よりCSSに記述して出力してる場合は全て書き換えが必要。
- 無料プランの場合、SolidとRegularの二種類からのみアイコンを選べる。
1,2については「1ヶ所だけ5のアイコンに変えたいんやけど？」とかそういうのは無理ってことですね。
CSSで色々アイコン加えてる人は全部切り替えしないといけないということになりますのでこれがクソめんどくさかった。
Font Awesome5のメリット
先に「アイコン自体は4のままでも使えるなら、手間掛けて変更する意味無いじゃん…」という人が出てしまわないようにメリットのお話からしておきます。
まずアイコンの種類が結構増えてるので、選択の幅が増えます。…まぁこれは個人的にはどうでも良いですがｗ（使用するところが限られているので。たくさん使いたい人には大きなメリット）
もう1個は他のユーザーが順次Font Awesome5に切り替えていってるので、Font Awesome4のままだと段々とCDNにキャッシュされることが少なくなる可能性があります。
「基本的な作りとしては5の方が速度的には難がある」とされているのですが、CDNでCSSを読み込んでいる場合、他ユーザーが使用しているアイコンもキャッシュされていく為Font Awesome5のユーザー数が多くなればその辺の問題はクリアされます。
速度的な問題が無くなるってことは基本的にはみんなが使ってる方を使っている方が無難な感じですね。
最適の設定
今のところうちではこんな感じです。
体感で申し訳ないんですけども、4の時と比較してもスピードが劣ったなぁ、ということはありませんね。
ちなみに以前アイコンを「同期表示」にしていて、「非同期」に変更すると全くアイコンが表示されなくなることがあります。（何回も経験してるｗ）
…がこの問題はブラウザ側のキャッシュを削除すれば全く問題ありません。履歴を消してみるってことですね。お試しあれ。
アイコンをCSSに記述して呼び出している場合
とりあえずは、無料版をお使いになる場合は
font-family: 'Font Awesome 5 Free';
/*以下使用したいフォントに応じてどっちかを記述*/
font-weight:900;/*fasの場合*/
font-weight:400;/*farの場合*/アイコンを使ってる場所全てにおいて、スタイルシートにてフォントファミリーの上書き、font-weightをどちらか指定していく作業となります。
このfont-weightは400か900でしかアイコンが表示されません。
例えば、要素内の全てに対し「font-weight:bold」という記述をしてるとfont-weightの値は700となりますのでそこで使ってるアイコンは全く表示されなくなります。四角いのが出るだけ。
僕の場合モバイルメニューを「bold」に指定していた為、既存のアイコンが全く表示されなくて苦戦してました。こんな指定したの記憶にありませんでした…ｗ
こういった事情からもし表示確認して、一部だけ四角に表示されたり全く表示されなかったりする場合はCSSファイルを見直して各個撃破していくしかありませんｗ
使いたいアイコンのファイル形式がわからない場合
基本的にはFont Awesome公式に行って調べる必要があります。
Font Awesomeの検索窓にCSSに記述してる文字列を入力しても検索出来ます。（f001とか）
アイコンによっては稀ですが文字列が変わっていたり、有料に切り替わっているものもある（薄いグレーになってる）ので、使用できる・できないの判断は検索するのが手っ取り早いです。
アイコンを選択してすぐに見える、
ここで見ても良いですし。
画面下部のここでも良いです。
「fas」または「far」どちらかが記述してあるので参照してください。
ただこの作業がどうしても面倒くさい、という場合は予測してしまうのも手です。
基本的に塗りつぶしてあるやつはSolid。
白抜きっぽいやつはRegular。
この判断方法で大体いけますｗ（自己責任で）どっちを指定しても出てこない場合はおそらく何かしら変更されているので他のを使うなりなんなりと。
あとはこういった不具合的なものもあるので目を通していただければ…。
https://ksukelife.com/blog/1270/こんなとこですね。