• HOME
  • BLOG
  • WebFont
  • IcoMoon Appで、イラストをフォント化、Webfont表示してみる

IcoMoon Appで、イラストをフォント化、Webfont表示してみる

onopkoさんが、Facebookで紹介されていた IcoMoon App が気になったので使ってみました。
僕のアイコンをフォント化、Webfont表示してみます。

IcoMoon Appは、アイコンをWebfontとしてダウンロードできるサービスのようです。
サイトをみると、たくさんのアイコンが並んでいますが、
その中で必要なものを選択することで、選んだものだけfont化されダウンロードすることができます。

加え、オリジナルの文字やイラストも、svgファイルを、
Import icons ボタンからアップロードすることで
webfont化が可能のようです。

自分のアイコンを題材に、それをやってみます。

まず先に、できた、ものはこちらです。

&

!

"

#

$

%

HTML上で、文字は単色の着色になりますので、
イラストのパーツをこのように、分けました。
style.css - blog.quq.jp
それぞれのパーツ文字を重なるようにレイアウトし、文字色を指定しています。

準備

SVGファイルを作成します。

僕は、Illustratorでこれらのイラストを作成していましたので、
Illustratorから、個別にsvgを書き出します。

※とくに理由はありませんが、Illustrator上では、
アートボード560pxのBox上にいっぱいのサイズでイラストを配置しました。

Illustratorでの、SVGファイルの書き出しは、

ファイル → 別名で保存 → フォーマット:SVG (svg)

で、作成することができます。

こんなかんじで準備しました。
名称未設定 1 @ 100% (レイヤー 1, RGB_8*) *

SVGを IcoMoon Appにアップ

IcoMoon App を開き、SVGのFont化手順にうつります。

画面はこんな感じ。
IcoMoon App

SVGのアップは、左上のImport Iconsボタンから行います。
ダイヤログが表示され、SVGファイルの選択待ちとなりまのでここで
SVGファイルを選択します。
複数ファイル選択ができるので、たくさんアップするのも簡単です。

アップが完了すると、このように画面にリスト表示されます。
IcoMoon App-1

フォント化したいイラストを選択して、Fontボタンを押します。
IcoMoon App-2

あとは、Downloadボタンをおすことで、
webfont群と、表示サンプルが入ったデータをダウンロードすることができます。

しかし、標準状態だと、どの文字にどのイラスト組合させにされたのか
わかりにくいので、Reset Encoding から、Basic Latin を選択します。
IcoMoon App-3
するとこのように、青枠で示した文字に組み合わせが設定されます。
身近な文字に変更されるのでわかりやすいと思います。
また、青枠部分は、入力フィールドにもなっているので
自分で好きな割り当てに変更も可能です。