最近のウェブデザインではアイコンフォントをつくるスキルは必須といっても過言ではないですね。

先日公開したサイトも、ムクドリさんやカバさんはアイコンフォントなのです。

アイコンフォントを作成する流れはだいたいこんな感じ

1. パスでアイコンを描く(色はベタ塗り1色！)
2. SVGで保存する（だいたいはこの時のファイル名がアイコンの名前になります）
3. SVGをアイコンフォント生成サービスでアイコンフォントに変換する

それではAdobe IllustratorとIcoMoonでサクっとつくってみましょう。

パスでアイコンを描く

アイコンフォントはその名前の通りフォントなので1色でつくり、CSSなどで色を変更します。

Illustratorならアートボード機能を使えば編集やあとでまとめてSVGにするときに便利っす。

SVGにする時はパスやフォントはアウトライン化して、パスファインダーで結合することを忘れずに。そうしないとフォントに変換する時にパスを正しく認識してくれなかったりします。

SVGで保存する

SVGで保存します。Illustratorなら名前をつけて保存で、ファイル形式は”SVG”、オプションで”アートボードに作成”にチェックすればアートボードごとに1ファイルずつ出力されます。
次のフォントに変換する時にSVGのファイル名がCSSで呼び出す際の名前になることが多いので、きちんと名前をつけましょう。

SVGをアイコンフォント生成サービスでアイコンフォントに変換する

SVGの準備が整ったら、さっそくフォントに変換します。
ウェブサービスを使えばブラウザ上から簡単に変換できるので便利。

ボクはFontelloやIcoMoonを使っています。が、Fontelloはたまにパスの解釈が変になります。出力されるCSSの名前とかは好みなだけに残念です。
まぁ今回はIcoMoonを紹介します。

IcoMoon

https://icomoon.io/app/

IcoMoon

↑のリンクをクリックすると、さっそく変換の画面が表示されます。

左上の[Import Icons]ボタンで先ほどのSVGを選択すると中央に読み込まれるので、フォントに変換するアイコンを選択。
そして右下の[Generate fonts]ボタンを押すと確認画面が表示されるので、右下の[Download]ボタンでダウンロード完了です。

あとは一緒に出力されたdemo.htmlの通りに利用してください。

アイコンフォントは使いやすい

FontAwesomeみたいなアイコンセットは便利ですが、自分が考えてつくったアイコンがサイトで動いてるのは、なんだかウキウキします。まだ挑戦できてない方は挑戦してみてはいかが？