Web アイコンフォント 作り方

SVG が欠かせないものとして、最近よく使われているのは、アイコンフォントです。
アイコンフォントとは、Webフォントとしてアイコンを表示することです。

アイコンをウェブフォント化すると、色・サイズを自由に出来る為、とても便利です。

オリジナル アイコンフォント 作り方

このサイトのトップページは現状こんな感じです。（未完成だしひどいですが・・）

ここのボタンの部分をアイコンフォントにしてみます。

イラストレーターで SVG 書き出し

イラストレーターで正方形のベクター画像を作ります。

ファイル → 別名で保存 → ファイルの種類をSVG(.SVG)

イラストレーター以外で、画像からSVGを作る

SVGをイラストレーター以外で作るには、Inkscape などいろいろソフトがありますが、SVG はテキストデータなので、ソフトがなくても画像からサクッと書き出す方法はないのか。

探していたところ、ActionScriptのpotraceをJavaScriptに移植したというGeorge.Nagaoka@さんの「Webと文字」記事を見つけました。

更にdefghi1977さんがそれを高速化した「ラスタ画像svg化スクリプト「potrace.js」」があり、そこにpotrace.js もあったので、とりあえず動かしてみました。（なんか２週間以上かかった・・）

ミュシャの絵もこんな感じでラスターのSVGデータにすることが出来ました。

真ん中の書き出しは、グレースケールで実際のSVGデータは一番右のものなります。IE9・Chromeで確認済みです。

ドラッグアンドドロップで、画像からSVGを作ってダウンロード出来るものが出来ましたので、よかったらどうぞ。
画像からSVGを作る DEMO

defghi1977さんの「ラスタ画像svg化スクリプト「potrace.js」」は細かい設定などもあり、更に、フォント化スクリプトもあってすごいので、ぜひお試しください。

「IcoMoon」のサイトでオリジナルアイコンをウェブフォント化

SVG ファイルが出来たら、次にそれをフォント化します。

フォント化するには、いろんなウェブアイコンのサービスがありますが、有名な「IcoMoon 」でやろうと思います。

左上の ImportIcons ボタンを押して、作成した SVG を選択します（複数可）。

Untitled Set の欄にアイコンが表示されますので、使いたいフォントを選択し、下部のFont ボタンを押します。

次ページ、下部のFont ボタンを押すとダウンロード出来ます。

ダウンロードしたzipを解答すると、fontsフォルダーには、４つのファイルが入っています。
icomoon.eot
icomoon.svg
icomoon.ttf
icomoon.woff

style.css は以下のようになっています。
fontsフォルダーと、この内容をサイトのCSSに持ってくればもう使えます。

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?5vgy95');
	src:url('fonts/icomoon.eot?#iefix5vgy95') format('embedded-opentype'),
		url('fonts/icomoon.woff?5vgy95') format('woff'),
		url('fonts/icomoon.ttf?5vgy95') format('truetype'),
		url('fonts/icomoon.svg?5vgy95#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-about:before {
	content: "\e600";
}
.icon-blog:before {
	content: "\e601";
}
.icon-home:before {
	content: "\e602";
}
.icon-mail:before {
	content: "\e603";
}
.icon-work:before {
	content: "\e604";
}

出来たものを設置すると、このような感じになりました。

手書き風のこのアイコンが欲しい方は、（いないかもしれませんが、）一応デモからダウンロード出来ますので、よかったらどうぞ。
DEMO を見る