アイコンフォントをPCにインストールしている場合は、コーディング後の確認に注意
アイコンフォントが使用されたデザインデータを開くためには、自分のPCにアイコンフォントをインストールする必要があります。
もし、インストールしていない場合は、下の画像のように「？」と表示されてしまいます。
そのため、デザインやコーディングをする人はFont Awesomeやマテリアルデザインアイコンなど、主要なアイコンフォントはPCにインストールされた状態になっていると思います。
しかし、サイトを実装するときには無効化にしておかないと、アイコンフォントの設定がちゃんとできていないのに、設定できていると勘違いを起こしてしまう可能性があります。
Font Awesomeが設定されていなくても表示されてしまうパターン
アイコンフォントに限った話ではないと思いますが、フォントがPCに入っている状態であれば、サイトの設定がうまくいっていなくても表示されてしまいます。
今回は疑似要素にFont Awesomeを設定するときを例に出しますが、font-familyの設定さえできていれば、PCにFont Awesomeが入っている人は普通に表示できてしまいます。
しかし、Font Awesomeを無効化すると、フォントが設定されていないので、四角い豆腐状態になってしまうのが分かります。
対処方法
ちゃんとアイコンフォントが設定されているかどうか確認するためにできることは下記のどちらかです。
- スマートフォンなど、アイコンフォントが入っていない端末でチェックする
- デザインツールを使うとき以外は、アイコンフォントは無効化にしておく
実機確認はするはずなので、その段階で気がつくはずですが、できればもっと早い段階で気づいておきたいですよね。
FontExplorer X Proなどのフォント管理ツールを使えば、普段は無効化しておいて、使いたいときだけ有効化にできます。
さらに、FontExplorer X Proの「アプリケーションセット」という機能を使えば、IllustratorやXD、Sketchなどのデザインツールを使うときだけアイコンフォントを有効化にして、それ以外のときは無効化にできます。
とりあえず忘れないように最初にちゃんと設定しておこうねという話なのですが、意外と後回しにしてしまいがちなので、こういった対策はしておくと良さそうです。
