ハンバーガーメニューのボタンや、SNSのロゴなど、Webサイト製作で使うアイコンをどう調達しようか悩んでいます。
選択肢は以下の4つだと思います。
結論から言えば、おとなしくフォントを使うことにしました。
- フォント (Font Awesome など)
- SVG (Octicon など)
- CSS (CSS ICON など)
- 画像
フォントは一番手軽だと思います。
Font AwesomeのようにCDNからWebフォントとして利用したり、IcoMoonの無料プランのように必要なものだけ選んでダウンロードしたり。
SVGはフォントと違って影をつけられないなど少しだけ使い勝手が悪いですが、CDNという外部に頼る不安もありませんし、フォントをダウンロードする手間と容量も不要という長所もあります。
Octiconの使い方については、別の記事を書いています。
🔗 素のHTMLでのOcticonsの使い方 - Qiita
簡単な図柄ならCSSのtransformなどを組み合わせて描くのもアリかとも考えました。
しかし、大きさを手軽に変えられないという欠点があります。
「CSS ICON」のように、scale()で変えるしかなさそうです。
全てのサイズを%やemで指定して、font-sizeに応じて柔軟に大きさを変えられないかと試行錯誤しましたが、アイコンが小さくなると描画が崩れる場合がありました。
下のサンプルをご覧ください。
See the Pen CSSで描いたアイコンは汎用性に難がある by Yuusaku Miyazaki (@sutara79) on CodePen.
「CSS ICON」のようにpxで指定すれば崩れませんが、気軽に再利用することはできないと思います。
解説用のサンプルなど、わざわざフォントやSVGを使うまでもない場面では役に立つと思いますが、本番では安心して使えません。
そういうわけで、おとなしくフォントを使うことにしました。