自分でデザインしたアイコンをWebfontとして使用する方法

自分でデザインしたアイコンをWebfontとして使用する方法

自分でデザインしたアイコンをWebfontとして使用する方法


Webサイトを作っていると、
「どんな環境でも、きれいに見える」
ということがどんなに大切かを日々実感しています。

iPhone6 Plusでは@2xどころか、@3xになってしまったりと、
これからもデバイスの多様化・ユーザー環境の多様化は
どんどん進んでいくのだと思います。

その多様なデバイス1つ1つに対応していくのはとても大変なので、
それをどう効率よく、美しく見せるか、ということを
考えていかないといけないですね。

そこで今日は、アイコンを使う際にとても便利な
通称「アイコンフォント」の作り方について書きたいと思います。

フォント化する際には、「IcoMoon」というWebサービスを利用します。

1. Illustratorでアイコンを作る

Adobe Illustratorを使って、アイコンを作ります。
アートボートのサイズは正方形であれば何でも良さそうです。
今回100px四方でつくってみました。
blog_1113_01

2. svgとして保存する

svgとして保存します。
スクリーンショット 2014-11-13 17.10.38

保存する際、「オプション」内の「画像の場所」については、
一応どちらを選択しても大丈夫でしたが、
埋め込みにするとファイルが重くなってしまうので「リンク」での配置を推奨します。
参考:http://helpx.adobe.com/jp/illustrator/kb/5710.html

3. svgファイルをアップロード

先ほどもあげた「ICONVAULT」へアクセスし、ファイルをアップロードします。
左上のImportIconsからアップロードすることができます。

スクリーンショット 2014-11-13 17.27.47

4. フォントを生成する

自分でアップロードしたものや、
それ以外にもIcoMoon内にあるアイコンを使うものだけ選択したら、
右下の「Font」タブをクリックし、生成画面へと移動します。
アイコン自体の名前を変更することができます。

スクリーンショット 2014-11-13 17.27.24

5. フォントをダウンロード

名前の変更を終えたら、右下の「Font」タブの下の「Download」をクリックすると
デモファイルとフォントファイル一式がダウンロードされます。

スクリーンショット 2014-11-13 17.36.05

あとは、fontsファイルを使用したいhtmlファイルの中へ入れて、

のように、フォント設定をcss内へ記述すれば自由に使用することができます。

のように使いたい場合は、ダウンロードしたフォルダ内のstyle.cssを丸ごとコピペすれば使用可能です。

自分で作ったアイコンがフォント化できると、
@2xも@3xもわざわざ画像を作る必要がないので
手間がすごく省けそうです。
これからどんどん活用していきたいと思います。

参考記事:
http://liginc.co.jp/web/design/font/33237

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">