Edited at

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

More than 1 year has passed since last update.

この記事では、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を設定する」を説明したいと思います。