キミにとってこの記事はワクワクする内容じゃったかのぅ?
  • 超ワクワク! (43)
  • ワクワク! (12)

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

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

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

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

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

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

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

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

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

自作アイコンWebフォント化とIcoMoonの使い方1

SVGファイルをIcoMoonに登録(インポート)

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

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

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

自作アイコンWebフォント化とIcoMoonの使い方2

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

自作アイコンWebフォント化とIcoMoonの使い方3

フォントファイルに変換

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

自作アイコンWebフォント化とIcoMoonの使い方4

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

自作アイコンWebフォント化とIcoMoonの使い方5

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

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

自作アイコンWebフォント化とIcoMoonの使い方9

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

自作アイコンWebフォント化とIcoMoonの使い方6 自作アイコンWebフォント化とIcoMoonの使い方7

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

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

自作アイコンWebフォント化とIcoMoonの使い方8

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

  • style.css
  • fontsフォルダ

があれば大丈夫です。

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

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

自作アイコンWebフォント化とIcoMoonの使い方11

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

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

自作アイコンWebフォント化とIcoMoonの使い方10

まとめ

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

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

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