Webアイコンフォントはどれを使うとよいか
問題
検索の虫眼鏡マークや、ログイン、ログアウトにカギのマークを表示したりしたいです。
Webアイコンフォントを使うとよさそうですが、たくさんありますね。
どれがよいでしょうか。
答え
方式
以下のように方式が様々。
- Webフォント ↔ SVG
- CSSのみ ↔ JavaScriptが必要なもの
- クラス指定 ↔ 合字（legature）
Font Awesome のJS版は、「SVG、要JavaScript、クラス指定」
Font Awesome のCSS版は、「Webフォント、CSSのみ、クラス指定」
Material Icons は、「Webフォント、CSSのみ、合字（legature）」
軽量さ
SVG＋JSのほうが軽いのかな？と思っていましたが、よく見てみると違いました。
SVGでアイコンを描こうとするとそこそこの容量になるようで、Webフォントのwoffファイル1個などのほうが数十KBに収まっていて、容量だけでいえばWebフォントのほうが少ないです。
SVGでも、自分が使うものだけを選んで組み込んで、不要なアイコン定義は削除すると、かなりコンパクトになります。
実際にブラウザにとってはどちらが軽いのか、開発者にとってどちらが扱いやすいのかについては、状況により異なりそうです。
手軽に利用できるアイコンフォント一覧
Font Awesome（JS版）
JS+SVG https://fontawesome.com/
Font Awesome 5 のCDNはないようです。こちらでアカウント作成が必要。
Font Awesome（CSS版）
Webフォント https://fontawesome.com/
Font Awesome 5 のCDNはないようです。こちらでアカウント作成が必要。
Material Icons
https://material.io/resources/icons/
CDN利用なら、以下のスタイルシートを1行追加するのみで導入可能。
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
GitHub Octicons
簡単導入はCDNから以下で。
<script src="https://cdn.jsdelivr.net/npm/octicons@8.5.0/index.min.js"></script>
ionicons
CDNから読み込みは以下で。
<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>
Typicons
CDN: https://cdnjs.com/libraries/typicons
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/typicons/2.0.9/typicons.min.css" />
Foundation Icon Fonts 3
https://zurb.com/playground/foundation-icon-fonts-3
CDNはこちら http://www.jsdelivr.com/projects/foundation-icons
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/foundation-icons@1.0.1/foundation-icons.css">
コメント