“ICON” Advent Calendar 2014 #25
この記事は賞味期限切れです。（更新から1年が経過しています）
“ICON” Advent Calendar 最終日です。
アイコンフォントをつくってみよう
Webアプリケーションでアイコンを表示する手段は様々ですが、 Webフォント化してCSSで管理する方法もメジャーになりつつあります。 その利点としては、ベクター素材なので拡縮が自由自在な点、 1ファイルにまとめてしまえるので回線に優しく、管理もし易い点などが挙げられます。
生成するのが多少厄介ではあるものの、 SVG素材からWebフォントを生成してくれるサービスも出ていますので心配はいりません。
今回は Fontello を使って、描いたアイコンをWebフォントに変換してみます。
1. Illustrator でアイコンを描く
SVG出力できるアプリケーションは他にもありますが、 やはりベクターで描くなら Illustrator が一番使いやすいように思います。
やり方は人それぞれでしょうが、私の場合は次のように制作しました。
- 単位をピクセルにする
- アートボードのサイズを128*128にする
- 8ピクセル毎にグリッドを引いて目安にする
- アートボード間の距離を8ピクセルの倍数にする
- ひたすらアイコンを描いたアートボードを量産していく
「グリッドに吸着」のON/OFFを場面で都度切り替えていくとスムーズです。
2. SVGに出力する
「ファイル」→「別名をつけて保存」を選択し、「アートボードごとに保存」にチェックを入れて保存します。 すると、「[アートボード名].svg」が保存先に量産されていきます。なんて簡単なんでしょう。
ファイル名はCSSのクラス名に反映されますので、 アートボードにはわかりやすい名前をつけておきましょう。
3. Fontello にアップロードする
出力したSVGファイル群をFontelloにアップロードします。SVGファイルをつかんで画面にドロップするだけでOKです。 プレビューが表示されますので、予想通りの見た目かどうかを確認しましょう。
思い通りのプレビューにならず、次のような警告が出ている場合があります。
If image looks not as expected please convert to compound path manualy.
（予想通りのイメージでない場合は、手動で複合パスに変換してください）
SVGでの表現がうまく再現出来ていない様なので、 Illustrator に戻って出来る限り単純化して再出力後、もう一度試してみましょう。
複合パスへの変換は「パスファインダー」を駆使して行いますが、 「オブジェクト」→「パス」→「パスのアウトライン」なども便利です。
複雑で面倒な場合は、いささか乱暴なやり方ではありますが、一度ラスタライズしてしまう方法も使えます。 「オブジェクト」→「ラスタライズ」でラスタライズ後、 「画像トレース」でトレースを行って「拡張」でパスに変換して余分なパスを削除します。 （ただし、高解像度のラスタライズでも細かい部分のパスは崩れてしまう事が多いです）
4. フォントをダウンロードする
右上の「Download webfont」をクリックするとフォントデータがダウンロードされます。 スタイルシートとプレビュー用のHTMLが同梱されているので、すぐ表示確認が出来ます。 親切設計すぎて興奮してしまいますね。
5. 使ってみる
スタイルシートはいくつかのファイルに分かれていますが、 基本的には「fontello.css」を使用すればOKです。 IE7用のフォールバックが「fontello-ie7.css」として用意されているので、 対応が必要な場合は条件分岐コメント等を利用してこちらも読み込みましょう。
<link rel="stylesheet" href="css/fontello.css">
<!--[if IE 7]><link rel="stylesheet" href="css/fontello-ie7.css"><![endif]-->
アイコンの表示指定は「icon-xxx」のように命名されたクラスをあてるだけです。 他で見るような “icon icon-foo” といった複数クラスの指定をせずに、 属性セレクタでclassの値から判別させています。
<i class="icon-foo"></i>
複数クラスで指定した方が都合が良いケースもありますので、 自分のやりやすい様にスタイルシートを追記するのもよいでしょう。
おわりに
メリークリスマス！
2014の一人アドベント・カレンダーも無事完了となりました。 今年も残りわずかとなりましたが、何方様も良いお年をお迎えください。
コメント