Image by:IcoMoon

ちょっとした画像を使うならアイコンフォントは、画像より、はるかに便利。
そんなアイコンフォントの使い方を数回に分けて紹介していこうと思います。

今回は、オリジナルアイコンフォントも作成できるWebサービス「IcoMoon」の使い方をメモっていきます。
オリジナルアイコンフォントだけではなく、予めアイコンフォントが用意されているので、試しに使ってみたいという人にも便利なWebサービスになっています。

このブログのヘッダーナビは「IcoMoon」を利用して作ったアイコンフォントを使用しています。

オリジナルのアイコンを作る

オリジナルのアイコンフォントは「.svg」形式で作成・保存したファイルを変換して使います。

ごちゃごちゃしそうですが、アイコンとアイコンフォントは、別物です。
アイコンをアイコンフォントに変換する・・・そんなイメージだとわかりやすいでしょうか？

「.svg」ファイルは、Illustratorで作ることができます。
他に、手軽に作ることができるWebサービスやソフトなどあったら教えてください。

アイコンを作るポイントとしては・・・
・正方形の中で作成する
・1色で作成する
・型抜きのように切り抜いて作成する
・複雑なデザインは作らない
ザックリとですが、こんな感じですね。

「無料で出来る！オリジナルアイコンフォントを作ってみよう | 株式会社LIG」では、もっと詳しく説明していますので参考にしてみてください。

作ったアイコンをアップロード・変換する

作成したアイコンをIcoMoonにアップロードして変換します。

IcoMoonにアクセスします。

サイト右上にある【IcoMoon App】を選択します。
この操作は、オリジナルに限らず、IcoMoonであらかじめ準備されているアイコンフォントを使う場合も同じです。

アイコンフォント選択ページが表示されます。

【Import Icons】を選択します。

そうすると、普段、見慣れたファイル選択のダイアログボックスが表示されるので、【作成したアイコン（.svg）ファイルを選択】します。

アップロードしたアイコンが追加されます。

今回は、どうしても見つけられなかったFeedlyのアイコンを作成してみました。
欲しい方は、メッセージ頂ければ、差し上げます！

アイコンフォントをダウンロード

さて、ここからがメインです。
自分のWebサイトで使いたいアイコンフォント選んで、ダウンロードをします。

ブラウザの上に表示されている「Import Icons」右隣にある【ポインタ】マークを選択します。

【使いたいアイコンフォント】を選んでいきます。
黄色い枠囲みでハイライトされると選択されていることになります。

使いたいアイコンフォントを選んだら、ブラウザの下にある【Font】ボタンを選択します。

【Download】ボタンを選択すると、ダウンロードのダイアログボックスが開いて、ダウンロード・保存ができます。

また、アイコンフォント選択ページに戻る場合は【Selection】ボタンを選択します。

これで、アイコンフォントファイルの準備が完了です。

IcoMoonに用意されているアイコンフォントを追加する

ここからは、オプション的な内容になります。

先に書いた通り、IcoMoon側で予めアイコンフォントが用意されています。
その用意されているアイコンフォントだけでも十分なくらいの量があります。

デフォルトの状態だと、すべてのアイコンフォントが表示されていないので、それらを表示する方法を説明します。

アイコンフォント選択ページをスクロールすると一番下に出てくる【Add Icons From Library…】を選択します。

そうすると、アイコンフォントのライブラリ群が表示されます。

ライセンスに注意して、追加したい場合【+ Add】、非表示にしたい場合【- Remove】を選択していきます。

選択が終わったら、ブラウザの下にある【Selection】を選択して戻ります。

これで、選択できるアイコンフォントの種類が増えます。

好きなアイコンフォント名やコードに変更する

さらに、ここからは、こだわり中級者向けのオプションです。
少し難しいので、気軽にアイコンフォントを使いたい人は、読み飛ばしても大丈夫です。

まずは、アイコンフォント名やコードのつけ方から・・・。

アイコンフォント名の変更

アイコンフォント名の変更は、各アイコンフォントの右側（画像「ico_feedly」「sun」）を選択すると変更できます。
半角英数字や記号で名前をつけましょう。

これらはclass名に使われます。
ダウンロード後や実装する時に変更することもできるので、そんなに深く考えずにという感じです。

コードの変更

コードは、アイコンフォントの下（画像「e600」「e601」）になります。
16進数の2～5桁でコード付けすることができます。

こちらは、アイコンフォントを文字で表すとコレですよーと、紐づける重要なコードになります。
ダウンロード後や実装する時に変更することはできないので注意が必要です。

また、コード付けは、1文字の半角英数字や記号でも付けることができます（画像「f」「s」）。
この場合、16進コードは、入力した文字に合わせて自動的に変換されます。

画像の例だと、
「f」が「66」
「s」が「73」
という具合に自動的に変換されます。
なので、16進コードは変更せずにそのまま使います。

ファイル名の変更やclass名に共通の接辞を付加する

ファイル名の変更やclass名に共通の接頭語・接尾語を付加する機能を説明します。

ブラウザの上にある【Preferences】を選択します。

そうすると設定ページが表示されます。

【Font Name】
ファイル名を指定・変更できます。

【Class Prefix】・・・class名の接頭語
【Class Postfix】・・・class名の接尾語
の付加に対応していて、必要がない場合は、空白にします。

画像の例を当てはめると、アイコンフォントが「ico_feedly」「sun」の場合
「icon-ico_feedly-icon」
「icon-sun-icon」
というclass名がアウトプットされます。

ファイル名は、ダウンロード後でも変更は可能です。
またclass名についても、前述したとおり、ダウンロード後・実装時に変更することができます。

設定が完了したら【×】を選択して閉じます。

以上、主要そうなオプションの説明でした。

あとがき

今回は「IcoMoon」の使い方に特化して書いてみました。
もちろんファイルをダウンロードしただけで、終わりではありません。
CSSで実装していくという、もうひと踏ん張りな作業があります。

あと、結局のところアイコンフォントってなんなの？どう便利なの？っていう説明もまだしていませんね。
それらも近日、公開予定ということで・・・山場は、まだまだこれからだっ！！