アイコンフォントを作ってみました。

2015-07-09

アイコンフォントを作ってみました。

今更感のあるネタですが…アイコンフォント

WEBサイトを制作していく上でアイコンフォントを活用することが増えてきたと感じています。
Genericons（http://genericons.com/）とか便利ですよね。

Genericons サイト

オリジナルでアイコン作成よりも、どこかで見たことのあるアイコンが閲覧者にはわかりやすい場合もあります。ですが、サイトのロゴや自社サービスの場合は、やはりオリジナルアイコンが必要になります。

ということでオリジナルアイコンのアイコンフォントをIcoMoonを使用して作ってみましたので備忘録的にまとめてみました。

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

１．アイコンフォント用にSVGファイルを作成

イラレでアイコンを作成
なんとなく正方形のアートボード(200px×200px)を用意して、
デザイナーが作成してくれていたAIデータからロゴを貼り付けて大きさを調整。

SVG形式で保存。

２．IcoMoon App(https://icomoon.io/app/#/select)にアクセスします。

IcoMoon App にアクセス

３．「ImportIcons」を押して、先ほど作成したSVGをアップロード。アイコンが追加されます。

SVGをアップロード

４．追加したいアイコンを選択して、右下の「GenerateFont」をクリックします。

追加したいアイコンを選択

５．右下の「Download」をクリックしてダウンロードします。

ダウンロードします

６．ダウンロードしたファイルを解凍し、Fontsディレクトリとその中のファイルをサイトにアップロードします。

７．Style.cssのコードをサイトCSSに追記or読みこませます。

@font-face {
font-family: 'icomoon';
src:url('fonts/icomoon.eot?3mrkf');
src:url('fonts/icomoon.eot?#iefix3mrkf') format('embedded-opentype'),
url('fonts/icomoon.ttf?3mrkf') format('truetype'),
url('fonts/icomoon.woff?3mrkf') format('woff'),
url('fonts/icomoon.svg?3mrkf#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-sierra:before { /* ←これが追加したロゴアイコンのクラス */
content: "\e600";
}

これでHTMLにこんな風に書けばロゴアイコンが表示されます。