イラストレータを使ってオリジナルのWebアイコンを作成、実装しよう！
最近特に注目を浴びてる、Webフォント、Webアイコンです。
Webフォントはファイルサイズの問題とかあって、日本語ではロゴやタイトルだけ使うといった用途に限られちゃったりしているけど、アイコンとして使うのは非常に有効です。
とくに、Retina対応とか、画像だとたくさんファイルを用意したり、ファイルサイズ大きな画像ファイルになっちゃったりしますよね。
そんなとき、Webアイコン。
フォントですので、
CSSでサイズ、色指定できます。
大きくしてもくっきりです。
ぜひ、使ってみてください。
前回は、Fireworksを使ってWebアイコンを作成する方法を紹介しました。
http://charlie.hateblo.jp/entry/2013/02/27/160124
今回は、イラストレータを使用してやってみます。
１．ICONを準備
イラストレータでパスを書いていきます。塗りつぶししておきます。
※アートボードのサイズは正方形にしておくのがよいです。
アートボードのサイズが１文字のサイズになりますので、バランスよく描いておきます。
３．IcoMoonを使って、フォントファイルに変換！
IcoMoon App - Icon Font Generator http://icomoon.io/app/
[Import Icons]ボタンを押します。ここでは、複数のSVGファイルを一気にインポートできますので、必要なアイコンは先にすべて制作してSVGで書き出しておきましょう。
選択した状態で、
「FONT→」を押す。
次に、各iconに英数字を割り当てます。ここでは、家の形のアイコンなので、[ ^ ]を割り当ててみました。
iconを選択した状態で、割り当てたいキーを押します。
最後に「Download」をクリックし、フォントファイルとサンプルのhtml,cssをダウンロードします。
４．実装
@font-face {
font-family: 'testfont';
src: url('testfont.eot?') format('eot'),
url('testfont.woff') format('woff'),
url('testfont.ttf') format('truetype'),
url('testfont.svg#testfont') format('svg');
}
span.icon {
font-family: testfont;
}html
<p>ここ <span class="icon">1</span> アイコン</p>
って、感じ。
ただ、この場合、アイコンを表示するためにテキストを入れるので、HTMLの構造的に問題があります。
記号に割り当てるのも一つの方法ですが、IcoMoonからダウンロードした時についてくるサンプルのように、
疑似クラス :before を使用することで、この問題を解決できます。
５．疑似クラス :before
HTMLの構造的に問題のないように、:before 疑似要素を使用した例です。
@font-face {
font-family: 'testfont';
src: url(testfont.eot);
src: local('testfont Regular'), local('testfont'),
url(testfont.ttf) format("truetype");
}
.icon-01:before {
font-family: 'testfont';
speak: none;
font-style: normal;
font-weight: normal;
line-height: 1;
-webkit-font-smoothing: antialiased;
}
.icon-01:before {
content: "\31";
}.icon-01:before のところを、 [class*="icon-"]:before と書くことで、複数フォントを使用するとき
CSSを無駄に大きくしないことができますが、この場合、すべてのクラスを無駄にサーチします。（＝速度気にする人は注意）
html
<p>ここ <span aria-hidden="true" class="icon-01"></span> :before疑似要素を使用</p>
参考サイト
- Fireworksを使ってオリジナルのWebアイコンを作成、実装しよう！
http://charlie.hateblo.jp/entry/2013/02/27/160124
- 安全な@font-faceの書き方(抄訳) - Weblog - hail2u.net
http://hail2u.net/blog/webdesign/bulletproof-at-font-face-syntax.html
