オリジナルWebアイコンフォントを『IcoMoon』で自作しよう！

アイコンフォントも自作できる！

アイコンフォントといえば『Font Awesome』なのですが、これが微妙に重たい…。ならば、自分でアイコンフォントを作ろう！ということで、『IcoMoon』というサービスを利用して作ってみます。

はじめに

今回は、『IcoMoon』というWebサービスを利用して、オリジナルアイコンフォントを作成します。

実際に利用するWebアイコンフォントだけを作成できるので、無駄なCSSを読み込むこともありません。結果的に、CSSのファイルサイズ圧縮につながったりもします。

オリジナルアイコンフォント作成手順

【手順1】SVGでアイコンフォントの元を作成

先にSVGファイルを準備しておく。

事前にWebアイコンフォントとして使いたいアイコンを、SVG形式で作成しておきます。SVGファイルであれば、あとはIcoMoonが勝手にフォント化してくれるので、“単色”でアイコンを作っておきます。

なお、今回はIllustratorを使用しましたが、SVG形式で作成できるならどんなソフトでもOK。

【手順2】IcoMoonに作成したSVGを読込

アイコンがSVG形式で作成できたら、IcoMoonのサイトにアクセスします。

[ IcoMoon App ]をクリック。

サイトにアクセスしたら、画面上のIcoMoon Appを選択します。

[ Import Icons ]をクリック。

すると、ずらーっとアイコンが表示されるページに遷移します。

ここでImport Iconsを選択し、先程作成したSVG形式のアイコンフォントの元をインポートさせます。

【手順3】フォントに変換するSVGを選択

SVGファイルが『Untitled Set』の項目に表示される。

SVGファイルのインポートが完了すると、『Untitled Set』の部分に読み込みが完了したSVGファイルがアイコン形式で表示されます。

アイコンフォント化したいものにチェック。

読み込んだSVGファイルの中で、アイコンフォント化したいものにチェックを入れます（チェックを入れると、枠がオレンジ色になる）。

【手順4】フォントの設定＆ダウンロード

[ Generate Font ]をクリック。

Webアイコンフォント化したいSVGファイルに、チェックが入っていることを確認し、Generate Fontを選択します。

[ 歯車アイコン ]をクリック。

このページに入ると、Webアイコンフォントとして利用するときのclass名が設定できます。そのままでも利用できるので、特に理由がない場合はデフォルトでOK。

class名がこれでいいなら、右下の歯車アイコンを選択します。

Webアイコンフォントの詳細設定。

ここでWebアイコンフォント化の設定を行います。

デフォルトのままでも利用可能なので、設定に関してはお好みで。私の場合は上記の設定で使うことにしました。

[ Download ]をクリック。

設定が完了したら、Downloadを選択して、オリジナルWebアイコンフォントをダウンロードします。

【手順5】アイコンフォントをCSSで使う準備をする

IconMoonからダウンロードした、WebアイコンフォントのファイルはZIP形式なので解凍をします。

IconMoonからダウンロードした、Webアイコンフォントの中身。

ファイルを解凍して中身を見ると、いろいろなファイルが入っています。

実際にWebアイコンフォントとして使う場合は、

• fontsファイル
• style.css

のみ利用します。

『selection.json』というJSONファイルは通常利用しないのですが、設定を変更する場合に利用します。なので、消さずに残しておくのがおすすめ。

オリジナルアイコンフォントの使い方

実際にオリジナルWebアイコンフォントを使ったデモ。

実際にIcoMoonで作成した、オリジナルWebアイコンフォントを使ってみたイメージです。丸枠の部分がアイコンフォントですが、しっかりWeb上に表示されています。

Code

HTML

<div class=”IcoGood”>GOOD!</div>

 <div class=”IcoBad”>BAD!</div>

 <div class=”IcoGood ColorA”>GOOD!</div>

 <div class=”IcoBad ColorB”>BAD!</div>

ダウンロードしたフォルダー内に『style.css』というCSSファイルがあるはず。ここに記載されているclass名（セレクタ名）の内容どおりにclass名を記載するだけで利用可能。

なお、IcoMoonの『style.css』ファイルに、::beforeの疑似要素がすでにあてがわれているので、そのままclass指定してOK。

CSS

利用したいWebアイコンフォントのclass名を、HTML上に記載するだけで利用可能なので、CSSへの記載は必須ではありません。ただ、IcoMoonの『style.css』は読み込むようにしておきましょう。

div[class^=Ico] {

 font-size: 5rem;

 font-weight: bold;

 letter-spacing: .5rem;

 line-height: 1.5;

 text-align: center;

 }
.ColorA::before {

 color: #5f00f7;

 }
.ColorB::before {

 color: #5ded11;

 }

当然、こんな感じでプロパティを設定することが可能。

注意点

【注意点1】SVGファイルは1色限定

Webアイコンフォント化するので単色で作成。

WebアイコンフォントするSVGファイルはリッチなデザインは避け、単色で作るようにしましょう。また、複雑なデザインも不向きなので、あくまでアイコンとして利用できそうな範囲で作成するのがおすすめです。

【注意点2】IcoMoonはフォルダーごと読み込むべき

IcoMoonのフォントに対するCSSファイル名は『style.css』となっているので、既存のCSSファイルと名前が混同する可能性がかなり大きい。おそらく、Web製作時にすでに『style.css』というCSSファイルを作っているはず。

なので、取り回しを良くするために、ダウンロードした『IconMoon』のフォルダーごとサーバーに入れてしまうほうが便利。そのほうがメンテナンスも容易になるのでおすすめ。

まとめの一言「Webアイコンフォントの自作でCSSの軽量化」

今回は、『IcoMoon』というWebサービスを使って、SVGファイルからオリジナルのWebアイコンフォントを作ってみました。

つまりは…

• Webアイコンフォントは自作できる
• SVGは単色で単純構造で作る
• ファイルの取り回しに注意

って、感じかなー？

アイコンフォントを自作してしまえば、すっごい便利なのです。うんうん。

オリキャラアイコンってのもできるね！