FontAwesomeを4から5にしてハマった話

実に今更な話ですが、最近になってFontAwesomeを使うようになりました。 画像ファイルのほうが汎用性が高いんじゃないかなーと頑なにアイコン画像集とかを使っていたのですが、最近公開されているWebテンプレートではFontAwesomeを使うのが当たり前ですし、少し前にWeb制作会社に20ページほど外注したら、そこでもFontAwesomeが使われていました。(あとjQueryも) jQueryとFontAwesomeはもう業界標準と言えそうなレベルなので、これはぼくも使って慣れておかねば、と。そんなわけです。

FontAwesomeとは 一言で言うとアイコンに特化したWebフォント。
古くからWindowsパソコンを触っている人に簡単に説明するなら「Wingdings」のWeb版。

従来であればWebページにアイコンを埋め込むために画像ファイルを用意するのが当たり前だったが、このFontAwesomeというフォントを使うことで、画像ファイルの代わりに文字コードを埋め込むだけでアイコンが貼り付けられるという仕組み。絵文字と言ったほうが通じやすいかも知れない。この補足説明の左上にある「i」マークもFontAwesomeのフォントである。

しかしサンプルコードでハマる

Webフォントと聞いていたので、FontAwesomeのCSS読み込んで font-family: fontawesome; と書くだけで良いんだよなぁーと思いつつも、念のため使い方を検索してサンプルを真似して使ってみました。

ところが、なぜか文字化け。アイコン部分が「□」表示になります。

サンプルが少々古いのか、CSSの読み込み部分が FontAwesome 4.5 だったので、そこを合わせてみました。
(互換性くらいあるだろーと、FontAwesome 5のCSSを読み込んでいたので4.5に変更してみました)

■Fontawesome 4.5の読み込み例

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha256-3dkvEK0WLHRJ7/Csr0BZjAWxERc5WH7bdeUya2aXxdU= sha512-+L4yy6FRcDGbXJ9mPG8MT/3UCDzwR9gPeyFNMCtInsol++5m3bk2bXWKdZjvybmohrAsn3Ua5x8gfLnbE1YkOg==" crossorigin="anonymous">

すると「□」だった文字がちゃんとアイコンになりました。

おぉ使えるじゃん!

でも、最新の FontAwesome 5 のCSSを読み込むとまた「□」に…。

■Fontawesome 5の読み込み例

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">

うーん? FontAwesomeは4と5で互換性がないのかしら。

FontAwesome 4から5の変更点

FontAwesomeを使ったサンプルは圧倒的に4系が多く、5が少ないため原因を見つけるまで少し時間がかかりました。

わかってしまえば単純な話なのですが、およそ以下の点に気をつければ大丈夫。

  • フォント指定を font-family:’Font Awesome 5 Free’; へ変更する (ブランド系のアイコンは ‘Font Awesome 5 Brands’)
  • フォント幅を font-weight:bold; へ変更する (もしくは font-weight: 900; )

特に後者でハマる人が多いみたい。

font-weightの件はこのへんで説明されています。
https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

修正前)
FontAwesome 4から5

修正後)
FontAwesome 4から5

うちのWordPressテンプレート(Simplicity2)でも使ってる補足情報のCSSなのですが、修正したのは下記2行です。

.information::before,
.question::before{
	font-family: "Font Awesome 5 Free";
	font-weight: bold;
	font-size: 50px;
	position: absolute;
	top: 20px;
	left: 13px;
	color: #EAE3B4;
}

また、FontAwesomeの4から5で、一部文字コードが変更になっているものもあるようなので、豆腐「□」表示になってしまった方は念の為公式サイトで文字コードを再度確認すると良いでしょう。
https://fontawesome.com/

まとめ

最近は技術の進歩が早すぎて、このFontAwesomeに限らずメジャーバージョンアップが怖いです。

MS-DOSが5から6になったからってそう大した変化はありませんでしたが…………いやまてよ、当時はそれなりに苦労した覚えがあるかも……

……うん、やっぱ訂正します。昔も今もソフトのメジャーバージョンアップは慎重にならないと怖いですね。

実はこの記事を書く前にWordPressのアップデート通知が来ていたので、何も考えずにポチっと「更新」ボタンを押したのですが、エディターがえらい変わってしまって、Crayonプラグインとかもうまく動かなくなり、大変あわてました。

幸い、Classic Editorというプラグインがあったので事なきを得ましたが、いやぁ、あやうくWordPress自体をバックアップデータから元に戻す作業に入るところでしたよ。

新技術を使いたいのはもちろんですし、セキュリティ面を考えてもバージョンアップは積極的に実施したいところですが、既存のものを修正しなければいけないとか、既存の機能が使えなくなるというのは、なかなか困ります。

そのへんは考慮した上で互換モードで動くとか、回避策は用意してほしいものですねー。

昔パッケージソフトのテスティングエンジニアとして働いていたぼくとしてはテストチームでそのへんのバグ出しとかはしそうなものに思えるのですが、オープンソース系だとそういう組織形態がなかったりするんですかね。