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

Webアイコンフォントの作り方 - ②アイコンをWebアイコンフォントに変換する

この記事では、Webアイコンフォントを作るための3つの工程、

  1. ベクターツール(Illustratorなど)でアイコンを作る
  2. アイコンをWebアイコンフォントに変換する
  3. SASS/CSS、HTMLを設定する

のうち、アイコンをWebアイコンフォントに変換する方法を説明します。

必要なファイル

まず、Webアイコンフォントとしてブラウザに表示するためには、いくつかのファイル形式が必要となります。

拡張子 形式 説明
.ttf True Type Font マイクロソフト社とアップル社が2社が共同で開発したフォント形式
.woff Web Open Font Format フォントデータが圧縮されている、サイWOFF を使用すると、無圧縮の TrueType や OpenType ファイルの使用と比べて帯域を抑えることができ、読み込み時間も短縮できる。新しい形式のため古いWebブラウザでは未サポート
.eot Embedded OpenType IE4でサポートされたWebフォント。圧縮されているためファイルサイズは小さい、IEのみ対応
.svg SVG Font SVGを利用したフォント形式

Webアイコンフォントに変換する

変換にはIcoMoonというWebサービスを利用します。
https://icomoon.io/app/

初回アクセス時はこのような画面です。

21f6367a-c8bd-4397-39bb-ac45c0f3e24a.png

9fad1f82-9552-7950-22b8-86563aa28283.png
をクリックするとアイコンの一覧を閉じることが出来ます

97ba042e-c189-2c7d-6372-c13c5a7e543d.png
閉じた状態

デフォルトのアイコンが邪魔なときは、右端のb04a1ea7-dbed-f174-0f6a-9e6634f45b92.pngをクリックし「RemoveSet」で削除できます

b3c0d919-177c-be27-7b43-ba5ef0027bbb.png

63618185-f766-1678-7a73-f485c3cd8229.png
何も無い状態

新規追加の場合

新規Setを作成し、SVGを読み込ませます

ヘッダーの06ca2813-8239-e8dd-f833-1f5883a9f8fd.pngから新規Setを作成します

315bee3f-b88f-a710-fed2-d4a513cf7a29.png

作成した「Untitled Set」は空の状態です。

195f0ce1-61e2-0774-ca64-edf086cb4afe.png

右側にあるcf762152-3369-97bd-53d6-de8520730d80.pngから「Import to Set」を選択する

8f5dc0e7-e9a0-e3a9-c8da-6db72a34f486.png

読み込みたいSVGを選択し「開く」で読み込む

ec713726-3a96-f081-4440-fe7a79bd8518.png
 ↓
f7fa2032-077f-2b19-8634-1b0874bcbcbf.png
読み込まれた状態

アイコンの並び替え

アイコンを並び替えたいときは、ヘッダーの移動ツール02002c45-07ad-218a-1bb8-6485a9908a9c.pngで移動させる

1516d649-dca4-3536-68aa-3e20d9a95855.png
 ↓
78fbec74-a9c7-8d30-2916-c972cca5a130.png
ドラッグ&ドロップで感覚的に移動できます

並び順を整理したら、次はアイコンを全て選択

0473b395-a9eb-c538-df1e-30766cb81f62.png
 ↓
467c5695-38e4-b0f4-2cc2-41149dda757c.png
すべてに黄色の枠が付けばOK

アイコンフォントの設定をする

画面下部のメニュー「Generate Font」をクリックすると画面が遷移します

1c197f61-842f-d690-1b4a-5e53325fa09f.png

d57f2e12-bf3f-1ca0-9e62-825cc264193f-1.png

ヘッダーの743fa3e8-85a8-cc43-15ec-34ccee41ff85.pngをクリックし、フォントの情報を編集します

3d897d42-6003-d8ec-757a-0ad8000ab94e.png

設定したらb14c6970-f34b-3dba-5607-23c4f71c7346.pngを押してモーダルを閉じる
※ここでのicfとはIcon Fontの略称です。サービスに寄らない汎用的な命名として使用しています

最初の画面「Selection」でアイコンを並び替えると、フォントアイコンを表示するコードが以下のようにバラバラになる場合があります。

7c025f77-598f-34bd-b31a-c8b72b401746.png

コードの番号は下2桁が16進数(0〜9、a〜f)となるので以下のように順に並んでいると綺麗で管理がしやすいです。

d41d7de9-5716-3331-d73f-9326d0a97fae.png
74d27331-62e6-9399-dd23-102e1bd17437.png

画面上で、編集したいコードをクリックすると編集出来るので適宜修正しましょう。
その際は必ず半角英数字で入力しましょう。

e699f6bf-92ee-3c43-86c3-4d7da698e45c.png

アイコン名も同様に編集できます。

7ba7306e-ecdf-fb9b-424a-7df8ca1d5e52.png

このアイコン名がCSS上でのclass名となるので、修正したい場合はここで修正しましょう。
→ class Prefix(プレフィックス/接頭辞)+アイコン名=class名
→ [e.g.] .icf-arrow-single
※class名を変えた場合は、SVGファイル名も揃えておくと、次回更新時のファイル管理がしやすいです

作成したアイコンフォントをダウンロードする

全ての編集を追えたら、画面下部のe5763266-ae08-715d-6786-8e08372d55e3.pngをクリックし、ダウンロードします

910e27e2-7d8e-47ef-d43a-dd455313222f.png

92209b65-7626-9902-8f40-781ddf9ff206.png
ファイル一式がダウンロードされます

解凍して中身を確認しましょう

3eaaabd7-aa36-8806-ad89-9fc8a634d693.png

以上が、新規でWebアイコンフォントを作る方法です。

続いて、この作ったWebアイコンフォントに新しくアイコンを追加する場合の説明です。

既存追加の場合

selection.jsonを読み込む

前回作成したときに作った、selection.jsonを読み込みます。
904f8acc-d244-9189-e782-2958c6bb1a73.png押して、開く。

e4a57169-b8ef-8c52-4045-808fb511f7a3.png

0ab31346-2098-2ab3-1f2e-aa2ba2428046.png
※「ファイルに保存されているすべての設定をロードしますか?」的なことを聞かれたら「Yes」を選択

きちんと読み込まれているか確認をする

フッターの39f913b6-363f-47d1-faac-163ff8facebf.pngをクリックし、コード等の順番が間違いないか確認します

5b9b411a-ca15-952c-b033-59826d320084.png

a841a205-b8e3-82a5-85bf-ce325c6f480c.png

OKだったら、フッターの「Selection」から前のページに戻る

0078c039-c73c-0284-d845-8dab5a1998da.png

新しく作成したSVGを追加

352a0a57-4130-1bd0-878f-7576f2d4d69e.pngから「Import to Set」を選択し、追加したいSVGを読み込む

261056c0-4fdb-663c-4829-ecccffd027aa.png

読み込んだら、アイコンの並び順を整理する。
※新規作成時と同じ要領です。

アイコンを全選択する

Generate Fontするには該当のフォント選択しておく必要があります。
一旦、ddf83939-ff52-deae-7e34-fb3f419ae788.pngの「Deselect」から選択解除し、再度全選択すると楽です。

21cf7e96-eba0-0caa-7afe-6b56f9b1f4c9.png

ef58505b-685c-1607-713c-6cbf5fdaec5c.png
※選択解除

45bffd05-104e-b759-2639-9567eb3bf3fd.png
※「Select All」で全選択

bffcfcb0-19b6-deb0-1a50-fceebe0a2977.png
※全選択

「Generate Font」から追加したフォントの設定を確認

SVGのファイル名が振られていること、コードが連番になっていることを確認
49627842-1ac8-a393-0984-63dc80dd582c.png

作成したアイコンフォントをダウンロードする

確認がOKだったら、画面下部のe5763266-ae08-715d-6786-8e08372d55e3.pngをクリックし、ダウンロードします


ダウンロードしたファイルの中身を確認し、問題なければ完成です!
22155d9f-f7bb-62e6-842c-e8ab3a7672ad.png

ダウンロードしたファイルの説明

ファイル・フォルダ名 説明
demo-files demo.html を表示するためのファイル
demo.html 書き出したアイコンフォントをブラウザで表示して確認できます
fonts icf.eot
icf.svg
icf.ttf
icf.woff
Webアイコンフォントファイル
これをコピーして実際のサイトに使います
Read Me.txt 説明書
selection.json 次回更新時にこのファイルをIcoMoonで使います。
大事な設定ファイル
style.css css。そのままコピペしてパスさえ合わせれば使おうと思えば使える
style.scss scssのフォントファイルのパス設定、classの設定などのファイル
variables.scss scssの変数設定のみのファイル

以上が、アイコンをWebアイコンフォントに変換する方法です。
次回は「SASS/CSS、HTMLを設定する」を説明したいと思います。