IcoMoonを使ってSVGからアイコンフォントを作る方法
こんにちは！制作部 デザイナーの森本です。
最近は、スマートフォンなどの端末の解像度が上がってきているため、アイコンであっても大きな画像が必要になりますが、多用するとページの描画速度の低下にも繋がってしまいます。
そこで、画像を多用せずとも高解像に対応できる「アイコンフォント」を簡単に作る方法をご紹介いたします。
今回は最近使ってみて一番シンプルで使いやすいと感じたジェネレーターサイト「IcoMoon」を使い、 SVGからアイコンフォントを作成していきます。
IcoMoonとは？
SVG形式のアイコンデータをアップロードするだけで自作のオリジナルアイコンを作成できる便利なWebサービスです。
また、商用でも無料で使用可能なアイコンが豊富に提供されています。
※ IcoMoon（Library内）の各アイコンには複数のライセンス形態がありますので、使用する前によく確認しましょう。
アイコンフォントを使うメリット・デメリット
メリット
- ビットマップではなくベクターとして扱えるので、解像度に依存せず拡大縮小が可能
- 1つのフォントファイルにまとめる事ができるので、画像と比較するとHTTPリクエストを減らせる
- トータルの容量を画像よりも抑えることができる
- 大きさや色をCSSでカスタマイズできる
- 導入が簡単でメンテナンスの効率もアップ！
デメリット
- 一部古いブラウザではアイコンフォントが使用できない場合がある（参考 : Can I use web font?）
- アイコンフォントが無効な環境の場合、アイコンが表示されなかったり、意図しない文字や記号が表示されたりしてしまう
アイコンフォントの作成の流れ
1. IllutratorでSVG形式のデータを作成する
パスでアイコンを描く
- アートボードは正方形にする（好きなサイズでOK）
- 線やフォントはアウトライン化した上で、必ずパスファインダーで結合する
- 余計なアンカーポイントを削除しておくことでアイコンデータが多少軽くなります
SVGで書き出し保存する
「ファイル」→「別名で保存」→「ファイル形式」を「SVG（svg）」に変更して保存
2. IcoMoonを使って自作のSVGデータをアイコンフォントへ変換
IcoMoonはこちら
http://icomoon.io/
無償で使えるアイコンは、IconMoon-Freeで現在 490種類あります
2-1.右上の「IconMoon App」というボタンをクリック
2-2.たくさんのアイコンが表示されるページに遷移します
このページの「IcoMoon - Free」の中のアイコンについては無料で利用できるようです。
2-3.左上の「Import Icon」ボタンをクリックし、先ほど作ったSVGデータを登録する
2-4.登録できました
2-5.アイコンデータを選択する
自分で作ったアイコン以外にも使いたいものがあればここで一緒に選択する。
2-6.右下の「Generete Font」ボタンをクリック
2-7.右下の「Download」ボタンをクリックしてデータをダウンロード！
この画面でファイル名の変更などちょっとした編集を行うことができる
3. HTMLとCSSに反映する
IcoMoonでダウンロードしたデータを解凍すると以下のようになっています
- demo-files
- demo.html
- fonts
- Read Me.txt
- selection.json
- style.css
アイコンフォントを表示させるのに必要なファイル
- index.html（作成する）
- style.css
- fontフォルダ内の4つのフォントファイル
- icomoon.eot
- icomoon.svg
- icomoon.ttf
- icomoon.woff
※ 4つすべてアップしないと環境によってアイコンが表示されない場合があります
index.htmlを作成し、タグを記述する
index.html内でアイコンを表示させたい場所の要素にCSSクラスをつける
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>IcoMoonを使ってSVGからアイコンフォントを作る</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- アイコン -->
<span class="icon-webiconfont-01"></span>
<span class="icon-webiconfont-02"></span>
<span class="icon-headphones"></span>
</body>
</html>
IcoMoonのこちらの画面からソースコードをコピーすることもできます
htmlのソースコードがでてきました
4. では表示してみましょう！
アイコンのカスタマイズをする場合は style.css を編集します
[class^="icon-"], [class*=" icon-"] {
font-family: 'icomoon' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
/* アイコンのカスタマイズ */
font-size: 300px;
color: #44aac1;
}
カスタマイズ後はこちら
大きくしてもキレイですね！
さいごに
大きさや色の変更が発生した際にも画像と比べてカスタマイズが簡単にできるため、とても効率的だと感じました。
簡単に実装が可能で学習コストもかからないので、単色のシンプルなアイコンであれば取り入れるととても便利だと思います。
また、ブラウザ中でベクター画像を扱うには、SVGを直接記述する方法もあります。
ブラウザ対応状況の違いやメンテナンス性の違いなど、それぞれメリットやデメリットがありますので、一概にどれが正解と言えるものではないですが、色々な手段を知っておくことで選択肢が広がり適宜対応できるのではないかと思います！
最後までご覧いただきありがとうございました！
