SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 社員募集 ...

Webアイコンフォントはどれを使うとよいか

問題

検索の虫眼鏡マークや、ログイン、ログアウトにカギのマークを表示したりしたいです。

Webアイコンフォントを使うとよさそうですが、たくさんありますね。

どれがよいでしょうか。

答え

方式

以下のように方式が様々。

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

https://octicons.github.com/

簡単導入はCDNから以下で。

<script src="https://cdn.jsdelivr.net/npm/octicons@8.5.0/index.min.js"></script>

ionicons

https://ionicons.com/

CDNから読み込みは以下で。

<script src="https://unpkg.com/ionicons@4.5.10-0/dist/ionicons.js"></script>

Typicons

http://www.typicons.com/

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">

関連するメモ

コメント