アイコンフォントで有名な Font Awesome 5 がリリースされていますね。SVG 対応したということで、拡縮でもきれいに出力されることが期待されます。当サイトでも Font Awesome 導入していますが、今回は v4 から v5 への書き換えを行ってみましたので、その手順をご紹介します、、、

インストール方法は色々ありますが、今回は公式が推奨している CDN から読み込む方法で行います。

1. head タグの v4 の font-awesome.min.css の読み込みを削除し、下記 v5 の CDN リソースの読み込みを追加。
   <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
2. i タグ内の記述を修正（fa＞fas, far, fal or fab の修正と、アイコンクラス名が変更されていたらそれも修正）

CSS から利用している場合は、以下も実施します。主に after, before に対して設定することになるかと思うので、ここでは after, before への設定方法を記載します。

1. head タグに下記を追加。
   <script>FontAwesomeConfig = { searchPseudoElements: true };</script>
2. font-family の修正（FontAwesome＞Font Awesome 5 Solid, Font Awesome 5 Regular, Font Awesome 5 LIGHT or Font Awesome 5 Brands）
3. content の確認及び、修正（f000のようなコードが4と5で異なる場合があります。その場合は、要修正）
4. margin の修正（after, before に付与していた margin は削除、.svg-inline--fa クラスに対して margin を追加）

以上です。
実際やってみると思いのほか、大変だと思います。何が大変か… Font Awesome 5 のサイトのページ表示が遅くて遅くて、アイコンコードの検索・確認がスムーズにできない。。。思ったよりもクラス名・アイコンコードが変わってて、変更が必要な印象でした。

今回は使いませんでしたが v4＞v5 へアップグレードに役立つ fa-v4-shim.js というのもあります。実際の開発案件でのアップグレードではこれを使ってスムーズに移行したほうが良いでしょう。

Font Awesome 5 公式サイト