はじめに
少し前にFont Awesome4から6(Freeプラン)にバージョンアップしたので、今回はその手順を共有したいと思います。
Font Awesomeはnpmで管理している想定で進めていきます。
Font Awesome4をアンインストールする
npm rm font-awesomeFont Awesome6(Freeプラン)をインストールする
npm i -D @fortawesome/fontawesome-freeSCSSを修正する
Font Awesomeを読み込んでいるSCSSを修正します。
// 修正前
@import "font-awesome"; // ※Font Awesome4のインポート文
// 修正後
$fa-font-path: '@fortawesome/fontawesome-free/webfonts';
@import '@fortawesome/fontawesome-free/scss/fontawesome';
@import '@fortawesome/fontawesome-free/scss/regular';
@import '@fortawesome/fontawesome-free/scss/solid';
@import '@fortawesome/fontawesome-free/scss/brands';
@import '@fortawesome/fontawesome-free/scss/v4-shims'; // ※後方互換用のモジュールSCSSの修正後にビルドして、画面を表示するとFont Awesome6のアイコンに置き換わっているかと思います。
おわりに
公式から後方互換用のモジュールが提供されており、基本的にはHTMLを修正せずにバージョンアップができました。
例外として利用しているアイコンの中で1点だけ意図しない変換がされてしまい、HTMLで指定するクラスの修正が必要でした。具体的には Font Awesome4:fa-unlock と Font Awesome6:fa-unlock でアイコンの形に変更があり、
Font Awesome6:fa-lock-open に修正しました。
他にも意図しない変換がされるケースがあるかもしれないので、後方互換用のモジュールを利用する際は要注意です。
