web関連

2014/06/17

そうだ、アイコンフォントつくろう。

cover

こんにちは、デザイナーのさっちゃんです。

最近すっかり浸透した感のあるアイコンフォントですが、空のspanか…と思って今まであまり積極的にやっていませんでした。
が、同じような画像の色違いをそこそこ大量に使う機会が巡ってきたので、今回観念して自作で作成してみました!

SVGをアイコンフォントに変換!

今回は、自前のものを変換するだけなので、Iconvaultというサイトを使ってSVGをアイコンフォントに変換してみました。

参考元はweb制作会社といえば!の「LIG」さん。
いつもおせわになっております。m(_ _)m
参考元:http://liginc.co.jp/web/design/font/33237

iconfont

Iconvault
http://iconvau.lt/

Iconvaultトップにある緑の「CREATE FONT」ボタンからsvgアップロードページへ移動します。

iconfont-1

予めsvg一式をzipファイルにまとめておいて、ドラッグ&ドロップ!
たったこれだけでアイコンフォントに変換してくれます。
便利&簡単!

iconfont-2

準備できました!的なページに切り替わったりしないのでちょっと不安になりますが変換が終わると、zipをダウンロードしますか?と聞かれるので見つけやすい場所に保存します。

iconfont-3

ダウンロードしたファイルをちょっとカスタマイズ

ダウンロードされたzipを開くと、いくつかファイルが入っています。

iconfont-4

preview用htmlを開いてみると…
アイコンフォントができてる!!簡単!

iconfont-5

しかもどの画像がどのクラス名か一目瞭然+クラス名がコピーしやすくなってるので、これは捗ります。

名前が長いので、ファイル名をそれぞれ「icon」に変更してみます。

iconfont-rename

これですっきり!

ファイル名変更に合わせて、cssの中で読み込んでいる名前も変更。

iconfont-rename2

html内に読み込み!

さっそくファイル一式を表示させたいページに移動。

なお、「.fontcustom-data」はなくても動きました( ´∀`)b
(ないとやばいよ!という場合は誰かこっそり教えて下さい。)

head内でicon.cssを読み込んで
htmlに表示させたいアイコンフォントのクラスを指定すると…

iconfont-6

iconfont-7

出た!

個人的にはやっぱり空のspanタグが気持ち悪いのですが、こればかりは実装上仕方なさそうです。(いつかcssが進化したら改善するんでしょうか。)
楽さをとるか、コーディングルールをとるか、みたいな感じがします。

アイコンフォントに向いてるもの、向いてないもの

SVGとアイコンフォントを両方使ってみて、それぞれ使い分けた方が良さそうというのがわかりました。

アイコンフォントを使うと良いもの

単色のアイコン画像
同じイメージで色を変えて複数箇所に使いたい

アイコンフォントに向いてないもの

1つの画像に複数色を使いたい場合
グラデなどの色を付けたい場合(cssのmaskを使えば、一応可能)
→SVGにすると良い

改めて使ってみると色違いの画像を用意する手間などが省けてとっても楽でした!
気になってるけど、まだ試してないという方はぜひ使ってみましょう(^O^)/