アイコンフォントの代わりにEmojiを使用する

⚠この記事が公開されたのは 2021年12月15日で、内容が古く、間違っている可能性があります。

ページ内でアイコンを使用する際にFontAwesomeなどのアイコンフォントが普及し便利になりました。

しかし「フォントデータのサイズが大きくページが重くなる」「CDNでフォントデータの読み込みに失敗した際にアイコンが表示されずに文字化けしてしまう」という問題あります。

しっかりとしたデザインを行うにはアイコンフォントを使用したほうがマッチしやすいのですが、「使用しているアイコンフォントに目的のアイコンがない」「別のアイコンフォントをわざわざ追加したくない」「ページの読み込みを軽くしたいのでアイコンフォントを使用したくない」というケースもあるのではないでしょうか。

その場合に私はEmojiを使用しています。

アイコンフォントの代わりにEmojiを使用するメリット

コピーペーストで入力が簡単
機種依存文字なのでデータのDLやCDNのリンクが不要
WindowsやMacなどPCでも使用でき、入力も簡単(Emojiパネルを呼び出すショートカット – Win: [スタート] + [.] キー, Mac: [Control] + [Command] + スペースキー)
Unicodeに対応
アイコンの種類が多く使いやすいものが多い(Full Emoji v14.0 3633種類 ※2022/12/15現在)
ガラケーでも対応できるEmojiがある(ほぼ無意味)

機種依存文字なのでOSやデバイスによって対応するEmojiのデザインに違いがある
Emoji(Color)はデザインが固定しているのでカラーの変更はできない(アイコンサイズはフォントサイズで変更可能)→ページのデザインにあわずアイコンのデザインが目立ちすぎて浮いてしまう等
ブラウザやOS・デバイス・プラットフォームによっては文字化けするEmojiがある