サイトにアイコンを使うとき、png画像として入れたり、svgで入れたり、アイコンフォントを使ったり、いろいろな方法ですると思いますが、今回はsvgのアイコンをフォント化してWebフォントとして使う方法をまとめてみます。
やったこと
svgのアイコンをフォント化はicomoonというサービスを使います。
icomoonではアイコンセットをダウンロードできたり、svgデータを組み合わせてsvgスプライトにできたりといろいろサービスがあるのですが、今回はsvgデータをフォントセットにするサービスを使います。
サイトを開いたら右上の「IcoMoon App」をクリックします。
次の画面で右上の、「Untitled Project」をクリックすると、プロジェクト選択画面になりますので、「New Project」で新しいプロジェクトを作成し、「load」します。
元の画面に戻るので、「Import Icons」をクリックするか、ドラッグ＆ドロップで追加できます。
追加したアイコンをクリックで選択するとハイライトするので、その状態で右下の「Generate Font」をクリックするとフォントセットが出来上がります（画像）
問題なければ右下の「Download」でフォントファイルがダウンロードできます。
あとはダウンロードしたフォントファイルをサーバーにアップして、CSSのfont-faceで読み込めば使えます。
また、ダウンロードした中にあるjsonファイルをicomoonのサイトで読み込めば、そのフォントセットをロードでき、複数人でも追加・編集が行えます。
メリット
色の変更がしやすい
フォントなのでcssのcolorプロパティで設定でき、色の変更がしやすいです。また、colorプロパティは継承するので、一緒に並べる文字と同じ色にするのも簡単にできます。
サイズの変更がしやすい
通常の画像であれば幅や高さを指定するところですが、フォント化するとfont-sizeで調整します。高さ = font-sizeになります。
こちらも一緒に並べる文字と同じサイズにする場合は簡単に扱えます。
もちろんサイズを変更しても荒くなることはありません。
注意点
フォントにするときにsvgファイルの取り扱いで気をつけることがあります。
- 線はカットされる（塗りのみ適用される）。
- 離れたパスは別々に扱われる。
- 太さはnormalとboldの2種類なので、微調整ができない。
と言うことで、以下の手順でIllustratorで調整してから、書き出します。
- 線の太さを調整
- （パスが分かれている場合）複合パスにする
- パスをアウトライン化する
また、ダウンロードしたアイコンを使用する場合はダウンロード元のライセンスや利用規約をよく確認してから使用しましょう。
まとめ
最近使ってよかったので、まとめてみました。
使いどころとしては、同じアイコンを複数の箇所で色を変えて使うときに効果を発揮するのではないかと思います。
作るのはちょっと手間ですが、一度用意すると使い回せるので便利です。
アイコンをたくさん使うWebサービスなどで使うとメリットを感じ取れるのではないかと思います。