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

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

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

を見ていきます。

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

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

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

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

HTMLやCSSの修正は不要。

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

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

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

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

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

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

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

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

v6 のCSSには v5 のフォントスタイルも書かれ下位互換があるので、HTML, 自作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のフォントスタイルも残ってるのがいいですね。（下位互換がある。）

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

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

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

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

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

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

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

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

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

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

font-familyも下位互換に対応しています。v5, v4以前のフォントが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; }

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

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

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

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

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

Unicode: 変わらない

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

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

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

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

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

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

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

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

<i>のクラス属性やCSSのfont-familyは、暴論を言えばなんでもいいです。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>

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

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

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

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

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

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

SVGならこれができます。

残念ながらSVGは、HTMLではFree版で使えたものでもPro版限定になり使えないものも多いです。また、v4以前は対応していません。

そしてSVGの弱点は、サイトページのHTMLサイズが大きくなること。直接マークアップをHTMLに記述しているので、大量のSVGフォントを使うとサイズも膨大になります。

なんでもSVGにすればいいということではありません。

これまで、Free版のv6の変更点を見てきましたが、Pro版も基本的には同じだと思います。

（使ってないのでなんとも言えないが。）

修正点のちがいもないはず。

（もちろん、cssのfomt-familyと<i>のclass属性（フォントスタイル）はちがう。）