アイコンフォントも自作できる!
アイコンフォントといえば『Font Awesome』なのですが、これが微妙に重たい…。ならば、自分でアイコンフォントを作ろう!ということで、『IcoMoon』というサービスを利用して作ってみます。
目次
はじめに
- 『IcoMoon』でオリジナルアイコンフォントを作る。
- オリジナルアイコンフォントを実際に利用する。
今回は、『IcoMoon』というWebサービスを利用して、オリジナルアイコンフォントを作成します。
実際に利用するWebアイコンフォントだけを作成できるので、無駄なCSSを読み込むこともありません。結果的に、CSSのファイルサイズ圧縮につながったりもします。
オリジナルアイコンフォント作成手順
- SVGでアイコンフォントの元を作成。
- IcoMoonに作成したSVGを読込。
- フォントに変換するSVGを選択。
- フォントの設定&ダウンロード。
- アイコンフォントをCSSで使う準備をする。
【手順1】SVGでアイコンフォントの元を作成
事前にWebアイコンフォントとして使いたいアイコンを、SVG形式で作成しておきます。SVGファイルであれば、あとはIcoMoonが勝手にフォント化してくれるので、“単色”でアイコンを作っておきます。
なお、今回はIllustratorを使用しましたが、SVG形式で作成できるならどんなソフトでもOK。
【手順2】IcoMoonに作成したSVGを読込
アイコンがSVG形式で作成できたら、IcoMoonのサイトにアクセスします。
サイトにアクセスしたら、画面上のIcoMoon Appを選択します。
すると、ずらーっとアイコンが表示されるページに遷移します。
ここでImport Iconsを選択し、先程作成したSVG形式のアイコンフォントの元をインポートさせます。
【手順3】フォントに変換するSVGを選択
SVGファイルのインポートが完了すると、『Untitled Set』の部分に読み込みが完了したSVGファイルがアイコン形式で表示されます。
読み込んだSVGファイルの中で、アイコンフォント化したいものにチェックを入れます(チェックを入れると、枠がオレンジ色になる)。
【手順4】フォントの設定&ダウンロード
Webアイコンフォント化したいSVGファイルに、チェックが入っていることを確認し、Generate Fontを選択します。
このページに入ると、Webアイコンフォントとして利用するときのclass名が設定できます。そのままでも利用できるので、特に理由がない場合はデフォルトでOK。
class名がこれでいいなら、右下の歯車アイコンを選択します。
- 【1】Font Name:フォントの名前
- 【2】Class Prefix:CSSのclass名
- 【3】Support IE 8:IE8のサポート可否
- 【4】Use attribute selections:属性選択の利用
ここでWebアイコンフォント化の設定を行います。
デフォルトのままでも利用可能なので、設定に関してはお好みで。私の場合は上記の設定で使うことにしました。
設定が完了したら、Downloadを選択して、オリジナルWebアイコンフォントをダウンロードします。
【手順5】アイコンフォントをCSSで使う準備をする
IconMoonからダウンロードした、WebアイコンフォントのファイルはZIP形式なので解凍をします。
- demo-files:デモ用HTMLで使用するファイル
- demo.html:デモ用HTML
- Read Me.txt:使い方
- fonts:フォントファイル
- style.css:フォントのCSS
- selection.json:アイコンセットの設定
ファイルを解凍して中身を見ると、いろいろなファイルが入っています。
実際にWebアイコンフォントとして使う場合は、
- fontsファイル
- style.css
のみ利用します。
『selection.json』というJSONファイルは通常利用しないのですが、設定を変更する場合に利用します。なので、消さずに残しておくのがおすすめ。
オリジナルアイコンフォントの使い方
実際に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;
}
当然、こんな感じでプロパティを設定することが可能。
注意点
- SVGファイルは1色限定。
- IcoMoonはフォルダーごと読み込むべき。
【注意点1】SVGファイルは1色限定
WebアイコンフォントするSVGファイルはリッチなデザインは避け、単色で作るようにしましょう。また、複雑なデザインも不向きなので、あくまでアイコンとして利用できそうな範囲で作成するのがおすすめです。
【注意点2】IcoMoonはフォルダーごと読み込むべき
IcoMoonのフォントに対するCSSファイル名は『style.css』となっているので、既存のCSSファイルと名前が混同する可能性がかなり大きい。おそらく、Web製作時にすでに『style.css』というCSSファイルを作っているはず。
なので、取り回しを良くするために、ダウンロードした『IconMoon』のフォルダーごとサーバーに入れてしまうほうが便利。そのほうがメンテナンスも容易になるのでおすすめ。
まとめの一言「Webアイコンフォントの自作でCSSの軽量化」
今回は、『IcoMoon』というWebサービスを使って、SVGファイルからオリジナルのWebアイコンフォントを作ってみました。

つまりは…
- Webアイコンフォントは自作できる
- SVGは単色で単純構造で作る
- ファイルの取り回しに注意
って、感じかなー?
アイコンフォントを自作してしまえば、すっごい便利なのです。うんうん。

オリキャラアイコンってのもできるね!
コメントを残す
コメントを投稿するにはログインしてください。