Webサイトに「アイコンフォント」を導入しよう！IcoMoon Appを使ってみた
Posted by NAGAYA on
こんにちは、めぐたんです。
今回はWebサイトに「アイコンフォント」を導入する方法をご紹介します。
アイコンフォントとは、フォント1文字1文字に、テキストではなくアイコンを割り当てたもののこと。
PNGやGIFなどの画像形式と比べて、「フォント」としての扱いならではの良いことがたくさんあります。
- 拡大・縮小しても鮮明に表示される
- CSSで色を変更できる
- テキストとのベースラインが合わせやすい
特に表示が鮮明であることは、さまざまなデバイスでの最適化が必要なレスポンシブWebデザインには大きなメリットです。
フォント化と聞くとなんだか手間がかかりそうな感じがしますが、Webサービスを使えばあっという間です。（高校生の就業体験のタスクにしても難なくクリアできました！）
それでは早速見ていきましょう。
今回使用するWebサービスはこちら
私がアイコンフォント生成に利用しているのは「IcoMoon App」です。
オリジナルで作成したアイコンであっても、SVGデータをアップロードするだけでフォントファイル化してくれる優れモノ。
また、必ずしもオリジナルのアイコンを作る必要はなく、ページ上にずらっと並んでいるIcoMoonのフリーアイコンから好きなものだけを選んでフォント化してもOKです。
その場合はSTEP.4 フォント化したいアイコンを選択へ飛んでIcoMoon Appの使い方からご覧くださいね！
アイコンフォントを作ってみよう
STEP1. オリジナルアイコンを準備する
まずはIllustratorで、フォント化したいオリジナルアイコンを準備します。
複数個ある場合はアートボードの利用が便利です。
制作時のポイント
- 色は黒1色で作成する
- 作成するアイコンの比率は同じくらいにする
- アウトライン化を忘れずに
特に色数は重要で、あくまでもフォントのため1色のみで作ることが必須です。
つまり、リッチなデザインは残念ながらアイコンフォント化には不向きです…。また、白抜きのために白背景の図形を重ねるのもNGなのでパスファインダーの機能「前面オブジェクトで型抜き」などを駆使しましょう！
STEP2. SVG形式で書き出す
アイコンフォントが完成したら、ファイル＞別名で保存からファイルの種類を「SVG」に指定して保存します。複数のアートボードに分けている場合は、このとき「アートボードごとに作成」にチェックを入れます。
次へ進むと、SVGオプションの画面が出てきます。
SVGプロファイルが「SVG1.1」であることを確認したら、基本はそのままでOK。
STEP3. IcoMoon Appへアップロード
IcoMoon Appへアクセスし、上部の「Import Icons」から先程保存したSVGファイルをアップロード。
一覧に表示されれば、オリジナルアイコンフォントの準備はOK！
いよいよフォントファイルの生成に移ります。
STEP4. フォント化したいアイコンを選択
一覧の中から、フォント化したいアイコンをクリックですべて選びましょう。
ページの下の方、「Add Icons From Library…」から、様々なライブラリを読み込むこともできます。無料のものも多くあり、有名な「Font Awesome」も選べます。
こういったライブラリからも、自分が欲しいアイコンだけを選べるのが嬉しいですね！
一覧にはライセンス等も記載されているので、確認の上ぜひ活用してみてください。
STEP5. フォントファイルを生成
アイコンが選択されている状態であれば、下部の「Generate Font」へ移動できます。
移動先の画面で指定するアイコンの名前は、後々CSSのclass名にも影響してくるので必要に応じて変更します。
また、Downloadボタン隣の歯車マークからはフォントファイル名や、classの接頭辞などもカスタマイズ可能です。
今回は、Font Nameを「iconfont」、classはc-ico-{アイコンの固有名詞}という命名規則にしたいのでClass Prefixを「c-ico-」と設定しました。
準備ができたら、「Download」ボタンをクリック！zipファイルが保存されます。
Webサイトにアイコンフォントを導入する
ダウンロードしたzipファイル内、「fonts」フォルダにフォントファイルが4つ格納されています。
見慣れない拡張子が多いので、Can I use…をもとにそれぞれの役割を下記に示してみました。
| フォントファイル | 役割 |
|---|---|
| iconfont.woff | IE9以上やその他ほとんどのモダンブラウザでサポートしている形式 |
| iconfont.eot | IEの独自仕様としてサポートされている形式 |
| iconfont.ttf | Android 4.3以前に対応するために必要な形式 |
| iconfont.svg | 上記以外、さらに古いブラウザに対応するための形式 |
これらのファイルを、適用したいWebサイト内のCSSから読み込みます。
基本はzipファイルに同梱されているstyle.cssの記述そのままで大丈夫です。フォントファイルを読み込むためのパスのみ適宜変更してください。
CSS
/* フォントファイルの読み込み */
@font-face {
font-family: 'iconfont';
src: url('/assets/font/iconfont.eot');
src: url('/assets/font/iconfont.eot#iefix') format('embedded-opentype'),
url('/assets/font/iconfont.ttf') format('truetype'),
url('/assets/font/iconfont.woff') format('woff'),
url('/assets/font/iconfont.svg#iconfont') format('svg');
font-weight: normal;
font-style: normal;
}
/* アイコンフォントのclass「.c-ico-XXX」共通の設定 */
[class^="c-ico-"], [class*=" c-ico-"] {
font-family: 'iconfont' !important;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* アイコンフォント一つ一つの読み込み */
.c-ico-watermelon:before {
content: "\e900";
}
.c-ico-ice:before {
content: "\e901";
}
.c-ico-flote:before {
content: "\e902";
}
HTML
あとは、HTML上で要素にclass名を指定するだけで擬似要素:beforeにアイコンが表示されます。
<i class="c-ico-ice"></i>
表示例はこんな感じ。
このようにカラーバリエーションを色々展開していきたいアイコンがある場合はアイコンフォントの利用が重宝しそうですね。サイズも思いのままです！
IcoMoon AppなどのWebサービスを利用するときの注意点
今回ご紹介したようなジェネレータを使えば、アイコンフォントの作成はとても簡単！
IcoMoon Appの場合、作成したプロジェクトやアップロードしたSVGは、基本ブラウザキャッシュにより保持されるので、時間をおいてアクセスしても引き続き追加や編集が可能です。
反面、ブラウザキャッシュでの保持にはこんなデメリットも考えられます。
- 最初に作成した人のPCでしかデータが保持されない = アイコンフォントに変更を加えたいとき、作業者が限られてしまう
- キャッシュをクリアするとデータが失われる
※ 2017/10/12 追記
IcoMoon Appでは、ダウンロードしたzipファイル内、直下にある「selection.json」を共有しておけば作成者以外でも編集が可能です！「Import Icons」からインポートすることで、アイコンフォントの情報がそのまま引き継がれます。
より便利に、作成した内容をアカウントへ保存しておくなどの機能を使いたい場合はプレミアム会員への登録が必要です。
参照：Go Premium
以上、アイコンフォントの作り方・導入方法のご紹介でした。
Webサイト内のちょっとしたワンポイントがきれいに表示できますので、ぜひオリジナルのアイコン作成にもチャレンジし、導入してみてくださいね。