Font Awesome 6 への移行と変更点。下位互換でそのまま使える。

2022年2月に Font Awesome 6 の Free版がリリースされたので、さっそく、v5からアップデートしました。

修正点はどこか？変更内容はどうなってるか？

を見ていきます。

（読み込むCSS, JavaScriptを変えるだけで移行はできる。）

Font Awesomeのメジャーバージョンが上がると変わるところのポイントは3つです。

のclass属性のフォントスタイル
のclass属性のフォント名
CSSのfont-familyのフォント名

v5 から v6 へのアップデートでも変更されてましたが、最初に答えを言うと、v5 からのアップデートは読み込むCSS, JavaScriptファイルを変えるだけで移行できます。

v4からの移行は、ある程度はv5と同じですが、ダメなら下位互換用のファイルを別途読み込めばそれで終わりです。

HTMLやCSSの修正は不要。

かんたんに超高速WordPressでサイトを作る、KUSANAGIが使える低価格クラウド・VPS・レンタルサーバ

下位互換はしっかりしてる。
のclass属性（フォントスタイル）: すべて変更
のclass属性（フォント名）: 変わるものあれば変わらないものあり
CSSのfont-family: 番号が変わっただけ
Unicode: 変わらない
v4の下位互換は完ぺきじゃない。
SVGはバージョンに関係ない。画像そのものだから。

下位互換はしっかりしてる。

遠い過去すぎて記憶があいまいですが、v4 から v5 へアップデートしたときも下位互換はできていて、非表示マーク（□）は少し出ましたが修正はごくわずかだった覚えがあります。

v5 から v6 へのアップデートでもしっかり下位互換が効いてるようです。

自分が使ってる分のフォントについてなので100%確証はないですが、すべてのフォントが修正なく表示されました。

くわしくは後述しますが、のclass属性は v5 のクラスも v6 のCSSに記述して下位互換を実現しています。

そりゃ、表示されるよね？

のclass属性（フォントスタイル）: すべて変更

のclass属性のフォントスタイルはすべて変更されました。読みやすく単語にしたかったようです。

v5	v6
fas	fa-solid
far	fa-regular
fab	fa-brands

Font Awesome 6 公式ドキュメント

Full Style Names - What's Changed

ドキュメントでは、Regular は Pro Only になってますが、じっさいはFree版でも使えるものがあります。

サイトのアイコン検索でFreeを条件に付けても意外とRegularのアイコンがヒットする。

v6 のCSSには v5 のフォントスタイルも書かれ下位互換があるので、HTML, 自作CSSはそのままでも表示されます。

CSS - フォントスタイルの下位互換

.fas,
.fa-solid {
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; }

.far,
.fa-regular {
  font-family: 'Font Awesome 6 Free';
  font-weight: 400; }

.fab,
.fa-brands {
  font-family: 'Font Awesome 6 Brands';
  font-weight: 400; }

// v4
.fa {
  font-family: var(--fa-style-family, "Font Awesome 6 Free");
  font-weight: var(--fa-style, 900); }

v4のフォントスタイルも残ってるのがいいですね。（下位互換がある。）

のclass属性のフォントスタイルは変わってるが、v4, 5の定義も残ってるので修正しなくても良い。

のclass属性（フォント名）: 変わるものあれば変わらないものあり

もうひとつののclassであるフォント名は、そのまま使ってるものがあれば変わってるものがあります。

たとえば、ホームに戻るときとかに使う '家' は、'home' から 'house' に変わりました。

houseのCSS（一部）

.fa-house::before {
  content: "\f015"; }

.fa-home::before {
  content: "\f015"; }

.fa-home-alt::before {
  content: "\f015"; }

.fa-home-lg-alt::before {
  content: "\f015"; }

.fa-house-chimney::before {
  content: "\e3af"; }

.fa-home-lg::before {
  content: "\e3af"; }

それにともなって、フォントの統合も行われています。v5の3種類の 'home' が 'house' に統合されました。

v6	<i class="fa-solid fa-house "></i>
v5	<i class="fas fa-home "></i>
v5	<i class="fas fa-home-alt "></i>
v5	<i class="fas fa-home-lg-alt "></i>
v4	<i class="fa fa-home " aria-hidden="true"></i>

もし、v6で統合されたものが気に入らない場合は、'house' で検索してみてください。Free版でもいくつかフォントが用意されています。

このように、フォント名の変更とともに統合が行われていますが、v5のフォントは何かしら v6のフォントへ移行されてます。

のHTMLに関しては、そのままでも非表示マーク（'□'）が出ることはありません。

Font Awesome 6 公式ドキュメント

Icons Renamed In Version 6 - What's Changed

のclass属性のフォント名は統廃合がけっこうあるが、v5のフォント名は定義で残しているので修正しなくても良い。

v4の下位互換は完ぺきではないが、下位互換用のファイルを読み込めばいいので修正しなくても良い。（くわしくは後述）

CSSのfont-family: 番号が変わっただけ

CSSのfont-familyはフォントの種類です。ゴシックや明朝を指定するときに使いますよね？

それと同じようにFont Awesome用のフォントがあります。

v5 と v6 のちがいは番号が変わっただけ。

v5	v6
Font Awesome 5 Free	Font Awesome 6 Free
Font Awesome 5 Brands	Font Awesome 6 Brands

Font Awesome Free版のfont-family

font-familyも下位互換に対応しています。v5, v4以前のフォントがCSSで定義されています。

CSSを表示閉じる

@font-face {
  font-family: "Font Awesome 5 Brands";
  font-display: block;
  font-weight: 400;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }

@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: block;
  font-weight: 900;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }

@font-face {
  font-family: "Font Awesome 5 Free";
  font-display: block;
  font-weight: 400;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype"); }
@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url("../webfonts/fa-solid-900.woff2") format("woff2"), url("../webfonts/fa-solid-900.ttf") format("truetype"); }

@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url("../webfonts/fa-brands-400.woff2") format("woff2"), url("../webfonts/fa-brands-400.ttf") format("truetype"); }

@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url("../webfonts/fa-regular-400.woff2") format("woff2"), url("../webfonts/fa-regular-400.ttf") format("truetype");
  unicode-range: U+F003,U+F006,U+F014,U+F016-F017,U+F01A-F01B,U+F01D,U+F022,U+F03E,U+F044,U+F046,U+F05C-F05D,U+F06E,U+F070,U+F087-F088,U+F08A,U+F094,U+F096-F097,U+F09D,U+F0A0,U+F0A2,U+F0A4-F0A7,U+F0C5,U+F0C7,U+F0E5-F0E6,U+F0EB,U+F0F6-F0F8,U+F10C,U+F114-F115,U+F118-F11A,U+F11C-F11D,U+F133,U+F147,U+F14E,U+F150-F152,U+F185-F186,U+F18E,U+F190-F192,U+F196,U+F1C1-F1C9,U+F1D9,U+F1DB,U+F1E3,U+F1EA,U+F1F7,U+F1F9,U+F20A,U+F247-F248,U+F24A,U+F24D,U+F255-F25B,U+F25D,U+F271-F274,U+F278,U+F27B,U+F28C,U+F28E,U+F29C,U+F2B5,U+F2B7,U+F2BA,U+F2BC,U+F2BE,U+F2C0-F2C1,U+F2C3,U+F2D0,U+F2D2,U+F2D4,U+F2DC; }

@font-face {
  font-family: "FontAwesome";
  font-display: block;
  src: url("../webfonts/fa-v4compatibility.woff2") format("woff2"), url("../webfonts/fa-v4compatibility.ttf") format("truetype");
  unicode-range: U+F041,U+F047,U+F065-F066,U+F07D-F07E,U+F080,U+F08B,U+F08E,U+F090,U+F09A,U+F0AC,U+F0AE,U+F0B2,U+F0D0,U+F0D6,U+F0E4,U+F0EC,U+F10A-F10B,U+F123,U+F13E,U+F148-F149,U+F14C,U+F156,U+F15E,U+F160-F161,U+F163,U+F175-F178,U+F195,U+F1F8,U+F219,U+F250,U+F252,U+F27A; }

ここでちょっと遊んでみましょうか。のfont-familyを無理やりv5以前に変更してどうなるか見てみます。

<i class="fa-solid fa-house" style="font-family:FontAwesome;"></i>
<i class="fa-solid fa-house" style="font-family:'Font Awesome 5 Free';"></i>

下位互換が働いて、v5以前のfont-familyでも表示されますが、そのままにせず修正をしたほうが良いです。

CSSの定義を見ると、v6を使ってるのに下位バージョンを使ってるように勘違いするから。

の修正はまあいいとしても、font-familyだけは直しておきましょう。

このfont-familyは、後述するcontentプロパティ値のUnicodeと合っていないと、非表示マーク（□）が出て上手く表示されません。

font-familyのフォント名はv4, v5の定義も残っているので、修正しなくても表示される。

しかし、コードを読む人が勘違いするので修正したほうが良い。

Unicode: 変わらない

Font Awesome には、HTMLのを使わず、CSSだけで作る方法もあります。

.my-house::before {
  font-family: "Font Awesome 6 Free";
  content: "\f015";
}

なんか、見た覚えありますね。そうです。用意されているCSSをコピってクラス名を変え自作しただけ。

（ちょっと志村けんが憑依した。）

そこでポイントになるのがcontentプロパティで指定するUnicode。

Unicodeはバージョンが変わっても変わりません。これがフォントそのものを表しているから。

のclassで指定するフォント名も、対応するUnicodeをcontentプロパティを使いCSS定義で紐付けています。

CSSのfont-familyも、Unicodeと合致するものでないと正常に表示されません。

のクラス属性やCSSのfont-familyは、暴論を言えばなんでもいいです。Unicodeと繋がっていれば。

それくらいUnicodeは大事なものです。変わるはずがありません。

Unicodeに変更はないので修正の必要はない。

このコードはフォント番号みたいなもので、フォントが追加されると発番される。

v4の下位互換は完ぺきじゃない。

v6 は v5との完全な下位互換を実現しているので、読み込むCSSやJavaScriptはひとつです。

（あえて分割されたものを使わないかぎり。）

ただ、v4は別です。'fa-home' はたまたま表示されましたが、下位互換用のファイルが用意されているので、完ぺきではないのでしょう。

v4の下位互換はかんたんです。v6のファイルを読み込んだ後にv4下位互換用のファイルを読み込めばOK。

<head>
  <!-- load all Font Awesome styles: v5, v6 -->
  <link href="/your-path-to-fontawesome/css/all.css" rel="stylesheet">

  <!-- support v4 icon references/syntax -->
  <link href="/your-path-to-fontawesome/css/v4-shim.css" rel="stylesheet">
</head>

Font Awesome 6 公式ドキュメント

Version 4 Compatibility - Older Version Compatibility

Upgrade from Version 4

v4の定義でも表示されることはあるが完ぺきではない。

用意されている下位互換用のファイルを別途読み込めば、HTML, CSSの修正は必要ない。

SVGはバージョンに関係ない。画像そのものだから。

SVGは画像そのもので、ベクター形式です。<svg>で表します。

HTMLだと勘違いしやすいですが、XMLに準拠したマークアップ言語。HTMLもマークアップの一種なのでHTMLに見えるだけ。

SVGはフォントをベクター形式の画像として表現しているので、Font Awesomeのバージョンが変わっても影響されません。

前述で、'home' が 'house' に統合されているものを見ましたが、v5以前のフォントはすべてv6に置き換わりました。

別の言い方をすれば、v6を使いながらv5のフォントは表示できません。

SVGならこれができます。

		SVG
v6	<i class="fa-solid fa-house "></i>
v5	<i class="fas fa-home "></i>
v5	<i class="fas fa-home-alt "></i>	Pro版
v5	<i class="fas fa-home-lg-alt "></i>	Pro版
v4	<i class="fa fa-home " aria-hidden="true"></i>	-