2016.07.22

アイコンフォントを簡単に作成する方法

Webフォントアイコンフォント

こんにちは、ウラカワです。

連休中にFINAL FANTASY XVの映画を見に行ってきました。

もうこっちの路線を本編にしてしまった方が良いんじゃないかと思うぐらいの出来でした。洋画レベルのCGクオリティで、ストーリー的にもFFを知らない人でも娯楽映画として楽しめると思います。（日本語ボイスに違和感を感じるかもしれませんが）

映画の出来が良かったのでゲームのハードルが上がったような・・・？

さて、ここから本題です。

コーディングでSVGファイルを取り扱う場合、Data URIにしたりインラインにしたり画像としてリンクしたりと方法はいくつかありますよね。

ただ、アイコンとして使う限りではwebフォント化がしてしまうのがオススメ。

色もサイズも簡単に変えることが出来るのが素晴らしい！

けど、どうしても用意に時間がかかるのが難点・・・出来る限り簡単に作りたい！

ということで、アイコンフォントを簡単に作成する方法をご紹介します。

はじめに

ベクター形式でファイルを作る場合、ほぼほぼIllustratorになると思いますが、アイコンフォントやsvgファイルにする場合いくつか注意点があります。

パスの合体・型抜き
オブジェクトの分割・拡張、アピアランスを分割
アートボードをオブジェクトに合わせる
書式のアウトラインを作成

上記はやっておかないと綺麗に表示されない可能性が高いです。

後から調整となると問題となる箇所を探すのも大変で、時間が勿体無いので事前にデザイナーさんへ伝えておきましょう。

データが揃ったら、まずはsvgにする必要があります。

Illustratorで書き出すか、ファイルが大量にある場合は以下のサービスで一括変換してしまいましょう。

cloudconvert

ai to svg – CloudConvert

IcoMoon Appでアイコンフォントを作成

SVGが用意出来たら、フォント化の作業に移ります。

いくつかジェネレーターは存在するのですが、個人的にはIcoMoon Appが使いやすかったです。

IcoMoon App

アクセスすると以下のような画面になります。

icomoon_01

まずはプロジェクト適当に作ります。

icomoon_02

アイコンをクリックするとプロジェクトの管理ページに飛びます。

プロジェクトを新規作成しましょう。

icomoon_04

プロジェクト名を入力し、新規作成したプロジェクトをロードして編集画面に戻ります。

（プロジェクトはjsonファイルでインポート・エクスポート出来るので、メンバーで共有しておくと良いかもしれません。）

icomoon_05

左上のボタンか、ドラッグ＆ドロップで自前のアイコンを追加します。

icomoon_07

インポートに成功するとアイコンが並びます。

icomoon_08

アイコンによっては調整が必要かもしれません。

その場合は編集ツールで調整します。

icomoon_12

鉛筆のボタンをクリックして、その状態で編集したいアイコンを選択します。

すると、以下の画面が開きます。

回転・拡大縮小・移動・ファイルの置き換えが行えます。

icomoon_15

アイコンに色が付いている場合、色編集ボタンが現れます。

色が確定しているもの以外は削除しておいた方が良いでしょう。

icomoon_14

調整が終わったらいよいよ生成です。

選択ツールで必要なアイコンを選択した後、右下のボタンをクリックします。

icomoon_16

するとダウンロードボタンが現れます。

icomoon_17

ダウンロードボタンの右にある歯車をクリックするとclassなどが設定できます。

あとはダウンロードしたzipファイルを解凍してホームページに埋め込むだけです。

使い方はFont Awesomeなどのよくあるアイコンフォントと同じです。

もう一手間かけるとさらに便利に

アイコンフォントにしたことで、classを付けるだけで表示され、色も簡単に変えることが出来るようになりました。

ですが、Font Awesomeほどオプション的なものは用意されていません。

せめて回転は欲しいところ。

なので、Font Awesomeから以下を拝借しました。他にも参考になるものがあるので必要なものがあったら移植で。

.fa-rotate-90 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}
.fa-rotate-180 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}
.fa-rotate-270 {
  filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.fa-rotate-90 {

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);

-webkit-transform: rotate(90deg);

-ms-transform: rotate(90deg);

transform: rotate(90deg);

}

.fa-rotate-180 {

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);

-webkit-transform: rotate(180deg);

-ms-transform: rotate(180deg);

transform: rotate(180deg);

}

.fa-rotate-270 {

filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

-webkit-transform: rotate(270deg);

-ms-transform: rotate(270deg);

transform: rotate(270deg);

}

sassでmixinを定義しておくとさらに捗ります。

@mixin icon($name) {
    font-family: 'icomoon' !important;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    @if $name == arrow {
        content: "\e900";
    }
}