IconMoonでロゴをWEBフォントにしてみます。

IconMoonでロゴをWEBフォントにしてみます。



まずはロゴにしたいSVGファイルをIllustratorなどで作成しておきます。ファイルは全てアウトライン化しておきます。
2013-11-27_22h50_04

IconMoonのAppにアクセスして、「Start the App」ボタンをクリックします。
2013-11-27_22h55_20_compressed

②「Import Icons」をクリックして、用意していおいたロゴデザイン(SVGファイル)をインポートします。
2013-11-27_22h55_38_compressed

③Selsectツールをクリックして、④インポートしたロゴデザインを選択します。今回はロゴデザインのみをフォント変換する予定ですが、複数のSVGファイルをインポートしてまとめることも出来ます。
2013-11-27_22h55_50_compressed

⑤「Font」ボタンをクリックします。
2013-11-27_22h55_56_compressed

⑥「Download」ボタンをクリックして、zipファイルをダウンロードします。
2013-11-27_22h56_04_compressed

⑦ダウンロードしたzipファイルを解凍すると、フォントファイル一式と設定用のスタイルシート、確認用のデモファイルが含まれています。
2013-11-27_22h53_20

⑧style.cssの中を見ますと以下のようになっています。

@font-face {
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot');
	src:url('fonts/icomoon.eot?#iefix') format('embedded-opentype'),
		url('fonts/icomoon.ttf') format('truetype'),
		url('fonts/icomoon.woff') format('woff'),
		url('fonts/icomoon.svg#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-logo:before {
	content: "\e600";
}

⑨ロゴフォントを表示させたい箇所で、

<span class="icon-logo"></span>...

と書いてあげれば、オリジナルのロゴデザインがWEBフォントとして表示されるようになります。

Icon Font & SVG Icon Sets ❍ IcoMoon
参考
Icon Font & SVG Icon Sets ❍ IcoMoon

IcoMoon provides a package of vector icons, along with a free HTML5 app for making custom icon fonts or SVG sprites. Browse among thousands of pixel perfect icons or import your own vectors.

Icon Font & SVG Icon Sets ❍ IcoMoon

今日はここまで
IconMoonでロゴをWEBフォントにしてみます。

IconMoonでロゴをWEBフォントにしてみます。


開発

まずはロゴにしたいSVGファイルをIllustratorなどで作成しておきます。ファイルは全てアウトライン化しておきます。 ①IconMoonのAppにアクセスして、「Start the App」ボタンをクリックします。…


関連する記事



こちらはいかが?


コメントを残す