fontawesoem4のCDNを変更した際に非表示になったアイコンを再表示する方法

　fontawesome5になり、スタイル（種類）という概念が導入されたため、CDNを変更すると非表示になってしまうアイコンがあります。
　この非表示になったアイコンを再度表示するには、後述する３つのスタイルに合わせて一つ一つコードを変更していかなければなりません。
（一部のアイコンは変更しなくても表示されます）

　面倒な作業になりますが、アイコンの数が多くなってから変更しようとすると、チェックが必要になるコードの数も多くなってしまうので、先にバージョン対策してしまいましょう。

iタグのアイコン

　変更例

変更点

　fontawesome4では、たとえば<i class="fa fa-angle-right"></i>というようにクラス名のプレフィックス（接頭語）はfaで統一されていましたが、 fontawesome5ではソリッド（fas）・ブランド（fab）・レギュラー（far）・ライト（fal）の４つの接頭語を使い分けなければならなくなってしまいました。
　ただ公式ページの対応表を見る限り、非表示になったアイコンを再表示する際にライト（fal）が使われることはないようなので、変更に際して使用されるプレフィックスは実質的には３つになります。（ライト（fal）は有料アイコン）
　faの後ろにs・b・rのいずれかを付けて再表示させていきましょう。

　なお変更するにあたって具体的な方法とヒントを以下で挙げておきます。

対応表と「にらめっこ」して変更する

　対応表が載っている公式ページを開いて、非表示になったアイコンにどのプレフィックス（接頭語）を付ければいいのか確認しながら変更すると確実です。
　ただ使用しているアイコンの数によっては気が遠くなような作業になります。

適当にアルファベットを入力する

　対応表で確認するのが面倒な場合は「fa」の後ろにs・b・rのいずれかを適当に当てはめて、プレビューで表示を確認するのがおすすめです。

　ヒントとしてはブランドアイコン（fab）は企業のロゴ（ツイッターやFacebookなど）を表していることが多いので、非表示になったアイコンが普段見かける企業ロゴであるならばfaの後ろにbを入力してみて下さい。
　無料でfontawesomeのアイコンを使用している場合は「fas」・「fab」・「far」の３つのうちのいずれかになります。
（無料で使えるアイコンとして公式ページでは、ソリッド（fas）、ブランド（fab）の２つが挙げられていますが、レギュラー（far）でも無料で使えるものもあります)

疑似要素のアイコン

　まず変更点を挙げる前に「疑似要素」と「iタグとの違い」について簡単に説明しておきます。
　疑似要素とはCSSのセレクターで「:before」もしくは「:after」がくっついている要素のことです。
　iタグを使ってアイコンを表示する場合はHTML上にコードを貼り付けますが、疑似要素（:before）（:after）でアイコンを使用する場合はCSS上に記述します。
　つまりコードを修正するにあたって、iタグで表示されているアイコンとは違う場所を探さなければならないということです。

変更例

変更点

　fontawesome4からfontawesome5にバージョンアップされた際にfont-familyの指定方法が変更され、新たにfont-weightを指定しなければならなくなってしまいました。

　fontawesome4ではfont-familyの値は「fontawesome」でしたが、fontawesome5になり"Font Awesome 5 Free"に変更されました。

　さらにfontawesome4では不要だったfont-weight（の値）はアイコンのスタイル（種類）ごとに設定されているため、それに合わせて値を使い分けなければなりません。

　再表示するためにこの2点を修正していきます。

スタイル（種類）別　font-weightの値

　iタグのところでも書きましたが非表示になったアイコンのスタイルを公式サイトで一つ一つ確認し、適合する値を記述するのが一番確かな方法ですが、一つ一つ確認していては時間がかかるので、スタイルに関する大まかなルールを把握しておくと便利です。

• ブランドアイコンは主に企業のロゴ（ツイッターやFacebookなど）を表しているので、非表示になったアイコンが普段見かける企業ロゴならばfont-weight:900;、そうでないアイコンには400か300を入力する
• 無料でfontawesomeを利用している場合でもfont-weight:300;で表示可能なものもある

font-familyを変更する時の注意点

　Font Awesome 5 Freeの両端をクオテーションマーク「" "」で挟んでください。
　　
　fontawesome4では「fontawesome」と文字列が詰まっていたのでクオテーションマークが不要でしたが、fontawesome5の場合は「Font Awesome 5 Free」と値の間にスペースがあるのでクオテーションマークを付ける必要があります。
「"　"」もしくは「'　'」がないとアイコンが表示されないので注意です。

　ここまで非表示になったアイコンについて取り上げてきましたが、fontawesome5のアイコンのスタイルは、公式ページに表示されているアイコンをクリックすると以下の赤枠で囲ったところに表示されるので、 スタイルを確認する場合はアイコンをクリックしてみて下さい。

それでも表示されない場合

　もしかしたら「どのプレフィックスを当てはめてみてもアイコンが再表示されない」ということがあるかもしれません。
　その場合はそのアイコンがfontawesome5非対応となってしまった可能性があります。
　たとえばfontawesome4にはというアイコンがありますが、fontawesome5になりこのアイコンは削除されてしまいました。
　そのためこのアイコンとデザインが似ているやで代用するしかありません。
　fontawesome4のすべてのアイコンがfontawesome5に対応しているわけではなく、残念なことにバージョンアップについていけなかったアイコンも存在するため「バージョンアップすると同じ形のアイコンを使用することができなくなる場合がある」ということにご注意ください。

fontawesome4のアイコンでいいや

　ちょっと試してみたけど「やっぱり変更するのは面倒だ」という場合はfontawesomeの公式ページにfontawesome4用のコードが記載されているのでこちらを参考になさってください。