【仕事効率化】自作アイコンのWebフォント化で制作の自由度を上げる：IcoMoonの使い方

ども、ども！ フロントエンドエンジニアのおはぎです。
サイト制作でアイコンをどのように使用していますか？
png形式で画像を作成？それともsvgで出力する？！

デザインによって様々な選択が出来るようになった今、 画像に書き出さず、アイコンをWebフォント化して使う方法を伝授します٩(๑>∀<๑)۶.1.2.3…Go！！

Webフォント化をすると何が便利なの？！

アイコンをWebフォント化しておけば、文字と同様にスタイルシート内で見た目の変更が可能となるので、変更する場面でとても便利です。
※プロパティ：「color」や「font-size」のスタイルシートで簡単に対応。

アイコンを利用する際によく用いられるのは、文字の横にデザインする場合!
リスト形式の表示方法で文字の隣りに配置することが多く、コーディングする際にポジションの設定をして、フォントとの上下中央を合わせないといけません。
そこで事前にフォント化をしておけば、文字のように扱えるのでとても簡単に変更できます。

Illustratorでオリジナルアイコンを作成

まずは、オリジナルアイコンの用意。
作成するソフトは、SVGファイルで保存(書き出し)が可能であれば大丈夫です。
今回はAdobe Illustratorで作成してみました。

メールのアイコンとしてよく使われる手紙のイラストを作成しました。 完成したら、svg形式で保存します。

SVGファイルをIcoMoonに登録（インポート）

「IcoMoon」は、WEBフォント化ができるサイトです。
様々なプランの記載がありますが、登録なしで無料のままWEBフォントの作成もできます。

それでは、サイトへアクセスしてからの手順をご紹介。
https://icomoon.io/

右上の[IcoMoon App]ボタンをクリック。

今度は左上の[Import Icons]ボタンから、先ほど作成したSVGファイルを選択して読み込みます。

フォントファイルに変換

SVGファイルの読み込みができたら、以下のように表示されているかと思います。

フォントファイルに含めたいアイコンをクリック。
黄色い枠線が付いていれば選択されている状態です。

フォントファイルのダウンロード

アイコンが選択されている状態で、サイト右下の[Generate Font]をクリック。

サイト右下にある「歯車マーク」をクリックすれば、フォント名やclass名の設定ができます。

Font Name・・・フォント名
Class Prefix・・・クラス名（CSSで指定する際のクラス名）

設定ができたら、[Download]ボタンをクリック。
ダウンロードが完了したら、zipファイルを解凍します。

Webフォントとして表示されるには、解凍ファイル内に

• style.css
• fontsフォルダ

があれば大丈夫です。

フォント化されているか確認しよう！

解凍データの中に[demo.html]があるので確認してみよう！！

style.cssの内容は以下になります。

色見の部分やフォントサイズを変更するだけで、アイコンの変更ができるようになりました！

まとめ

自作したアイコンをWebフォント化しておくだけで、いろんなサイトでも使い回せたり、色見の変更をする場合もとても楽になります。
わざわざIllustratorやPhotoshopなどの画像編集ソフトを使わなくても変更対応ができるので、とても効率的です！！

そもそも、自作アイコン作れないんだけどなぁー。。。

という方は、有名どころですが、Font Awesomeのサイトがオススメ！
Webフォント化、良ければご活用してみてください!!

大阪府堺市にあるジョイントメディアならホームページ制作を格安で依頼出来ます