18年6月28日

この記事はワクワクしましたか？

超ワクワク！ (48)
ワクワク！ (20)

Ex:181

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

おはぎ

フロントエンド

1 Webフォント化をすると何が便利なの？！
2 Illustratorでオリジナルアイコンを作成
3 SVGファイルをIcoMoonに登録（インポート）
- 3.1 フォントファイルに変換
- 3.2 フォントファイルのダウンロード
4 フォント化されているか確認しよう！
5 まとめ

ども、ども！フロントエンドエンジニアのおはぎです。
サイト制作でアイコンをどのように使用していますか？
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の内容は以下になります。

<div class="table_wrap">
@font-face {
  font-family: 'maill';
  src:
    url('fonts/maill.ttf?ko9orb') format('truetype'),
    url('fonts/maill.woff?ko9orb') format('woff'),
    url('fonts/maill.svg?ko9orb#maill') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'maill' !important;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-02:before {
  content: "\e900";
  color: #4b4b4b;
}

@font-face {

font-family: 'maill';

src:

url('fonts/maill.ttf?ko9orb') format('truetype'),

url('fonts/maill.woff?ko9orb') format('woff'),

url('fonts/maill.svg?ko9orb#maill') format('svg');

font-weight: normal;

font-style: normal;

}

[class^="icon-"], [class*=" icon-"] {

/* use !important to prevent issues with browser extensions that change fonts */

font-family: 'maill' !important;

speak: none;

font-style: normal;

font-weight: normal;

font-variant: normal;

text-transform: none;

line-height: 1;

/* Better Font Rendering =========== */

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

}

.icon-02:before {

content: "\e900";

color: #4b4b4b;

}

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

まとめ

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

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

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

大阪府堺市の格安ホームページ制作・リニューアルなら