アイコンフォントの具体的な使い方 - IcoMoon App

アイコンフォントを利用する上で便利なサイト「IcoMoon App」でフォントファイルを作成し、ダウンロードしたフォントファイルからWebページにアイコンを表示するまでの具体的な手順について解説します。

IcoMoon App には数千種類のアイコンが登録されており、ユーザーが選択したアイコンだけでフォントファイルを作成してくれます。フォントファイルには自分で作成したカスタムアイコンも含めることができます。

またアイコンは、Webページ上で回転/反転/拡大/縮小など編集してからフォントファイルにすることもできます。

EPS/PDF/PNG/SVG形式でのファイル提供も行っており、Illustratorなど画像編集ソフトでアイコンを編集することができます。

なお、アイコンには無償版と有償版がありますが、無償版でも十分な数が登録されています。

【コンテンツ】

  1. プロジェクトを登録する
  2. ライブラリを読み込む
  3. アイコンを選択する
  4. メニューの他の機能の説明
  5. 各モード(Select/Remove/Move/Edit)の説明
  6. アイコンを編集する
  7. アイコンを検索する
  8. フォントファイルをダウンロードする
  9. ダウンロードしたファイルをディレクトリに配置する
  10. CSSを修正する
  11. CSSをインクルードするlinkタグを記述する
  12. アイコンを表示するためのHTMLコードを確認する
  13. アイコンを表示したい場所にHTMLコードを記述する
  14. アイコンをテキストとして文章に挿入する

プロジェクトを登録する

下記ページにアクセスします。
https://icomoon.io/app/#/select

IcoMoon App サイト

このサイトでは、ブラウザキャッシュを使ってユーザーが設定した情報を保存しておいてくれます。
作成したフォントファイルに後でアイコンを追加したいとか、何種類かのフォントファイルをダウンロードしたいなら、プロジェクトを作成しておくことをお勧めします。
1回だけのダウンロードならこの作業は必要ありません。

プロジェクトは複数作成し登録することができます。
デフォルトでは、「Untitled Project 1」という名前のプロジェクトが1つだけ登録されています。

まずはこの名前を変更してみましょう。
左上のメニューボタンをクリックし、[Manage Projects]を選択します。

Manage Projects メニュー

「Untitled Project 1」の部分をクリックし、適当な名前に変更します。

プロジェクト名変更画面

ここでは、ビデオアイコン用フォントファイルを作成するとして、
「Video Icon」と名前をつけてみます。
名前をつけたら、[Load]をクリックします。

Project Load 画面

右上のプロジェクト名が、「Video Icon」になりました。

プロジェクト名が変更された画面

次にもう1つプロジェクトを作成してみます。
左上のメニューボタンをクリックし、[Manage Projects]を選択します。
プロジェクト管理画面で、[New Project]をクリックします。

プロジェクト作成画面

「Untitled Project ?」という名前のプロジェクトが作成されますので、適当な名前に変更します。

作成したプロジェクトの名前変更画面

新しいプロジェクトには、矢印アイコンのフォントファイルを作成するとして、「Arrow Icon」という名前をつけてみました。
これで、2つのプロジェクトが登録されました。

プロジェクト一覧画面

どのプロジェクトを選択するかは、プロジェクトの横の[Load]をクリックします。

ライブラリを読み込む

新規に作成したプロジェクトでは、アイコンが何も表示されていません。
したがって、最初にアイコンライブラリを読み込む必要があります。

画面上の[Add Icons From Library...]をクリックするか、メニューから[Icon Library]を選択します。

Icon Library メニュー

無償版では、[Add]と書かれているボタンをクリックすると、ライブラリが追加されます。
[Purchase]は有償になります。

ライブラリ追加画面

アイコンを選択する

アイコン選択画面で、フォントファイルに含めるアイコンを選択します。

アイコン画像をクリックするたびに、選択/解除のトグルになります。
ドラッグしてエリアで選択/解除することもできます。
Shiftキーを押しながらクリックすると、前回クリックしたアイコンとの間にあるアイコンがすべて選択/解除されます。

アイコン選択画面

ライブラリの中のアイコンをすべて選択/解除するには、右横にあるライブラリメニューから、[Select All / None]を選択します。

Select All / None メニュー

選択しやすくするため、表示してるアイコン画像のサイズを変えるには、目の形をしたアイコンをクリックしてサイズを選択します。数値を入力して任意のサイズにすることもできます。

アイコン表示サイズ変更メニュー

メニューの他の機能の説明

左上のメニューボタンからはプロジェクトの作成/管理、ライブラリの読み込みができることを説明しました。
その他、以下の機能もあります。

すべてのアイコン選択を解除する

左上メニューの[Clear Selection]を選択すると、アイコン選択をすべて解除できます。

Clear Selection メニュー

選択したアイコンから新しいセットを作成する

アイコン選択画面はライブラリ単位で表示されていますが、選択したアイコンだけを集めて新しいセットにできます。後でアイコンを追加するときに便利な機能です。

左上メニューの[New Set From Selection]を選択します。

New Set From Selection メニュー

「Untitled Set」という名前のセットが作成され、一番上に表示されます。
新しいセットのアイコンはすべて選択状態になっており、他のライブラリで選択状態にあったアイコンの選択は解除されます。

新しいセットが作成された画面

新しいセットの名前を変更する

新しいセットはデフォルトの「Untitled」という名前がつきますので、それを変更してみます。

セットの右にあるメニューアイコンをクリックして、[Metadata]を選択します。

Metadata メニュー

[Edit Metadata]ボタンをクリックします。

Metadata 表示画面

[Name]の部分に適当な名前を入力します。入力が終わったら、右上の×をクリックします。

Metadata 編集画面

新しいセットにアイコンを追加する

先ほど作成したセットにアイコンを追加してみます。

セット内のアイコンの選択をすべて解除し、追加するアイコンを選択状態にします。

追加するアイコンを選択した画面

セットの右にあるメニューアイコンをクリックして、[Copy Selection to Set]を選択します。

Copy Selection to Set メニュー

選択したアイコンが追加されました。

アイコンが追加された画面

各モード(Select/Remove/Move/Edit)の説明

画面の上にあるボタンをクリックすることでモードが切り替わります。

モードボタン

Selectモード

デフォルトモードであり、アイコンの選択/解除をするモードです。
これまでの説明はすべてこのモードで行ってきました。

Selectモード

Removeモード

このモードにしていると、クリックしたアイコンが削除されます。
ドラッグによるエリア選択でも削除できます。

Removeモード

Moveモード

このモードにしていると、アイコンをドラッグして移動させることができます。

Moveモード

Editモード

このモードにしていると、アイコンをクリックしたときに編集画面が表示され、アイコンを編集することができます。

Editモード

アイコンを編集する

Editモードでアイコンをクリックすると編集パネルが表示されます。

編集パネルでは、アイコンの回転/反転、拡大/縮小、上下左右への移動、キャンバス幅の拡大/縮小、グリッド数の変更、タグの編集ができます。

アイコン編集パネル

アイコンを検索する

アイコンを選択するときは、検索ボックスにキーワードを入れて検索すると便利です。
例えば、「arrow」と入れてみます。

検索ボックス

検索結果には、読み込んでいるライブラリからだけでなく、他のライブラリのアイコンも表示してくれます。

検索結果

他のライブラリのアイコンをセットとして取り込みたい場合は、
アイコンを選択した後、検索ボックス内の[+]をクリックします。

他ライブラリのアイコン取り込み画面

サブセットとして画面に表示されます。

サブセット表示画面

フォントファイルをダウンロードする

フォントファイルに含めるアイコンを選択した後、画面の下にある[Font]ボタンをクリックします。

なお、隣にある[SVG]ボタンをクリックすると、SVGファイル/PNGファイル/CSSスプライトを色やサイズを指定してダウンロードすることができます。

フォント選択画面

下のような画面が表示されますので、[Preferences]ボタンをクリックします。

フォントダウンロード画面

ここでは、Font Name や Class Prefix などを変更できます。
この記事ではデフォルトのままにしておきましょう。

条件設定パネル

その他、アイコン名や Unicode もこの画面で変更することができます。
すべての設定が終わったら、[Download]ボタンをクリックします。

フォントダウンロード画面

ダウンロードしたzipファイルを解凍すると、以下のファイルが含まれています。

ダウンロードしたファイルリスト

ファイル 説明
フォントファイル
(.eot/.svg/.ttf/.woff)
4種類のフォーマットのフォントファイルがあります。
style.css @font-faceとアイコン表示するためのクラスを記述しています。
Raadme.txt 使い方や注意点を記述したファイルです。
demo.html ブラウザで表示すると、フォントファイルに含まれているアイコン画像・対応するクラス名・Unicodeが表示されます。またページ上でHTMLコードを入力することによってアイコンの表示テストもできます。
demo.css
demo.js
demo.htmlで使用するファイルです。
selection.json JSON形式のファイルですが今回は使用しません。

ダウンロードしたファイルをディレクトリに配置する

フォントファイル4種類と「style.css」をサイトのディレクトリに配置します。

配置するディレクトリは任意で構いませんが、今回はHTMLファイル直下の[css]ディレクトリ内に「style.css」を置き、[fonts]ディレクトリ内にフォントファイルを置くこととします。

また、「style.css」はCSSファイル名としてよく使われているため、ファイル名を「icomoon.css」と変更します。

CSSを修正する

[CSS]ディレクトリ内に配置した「icomoon.css」を修正します。
フォントファイルは[fonts]ディレクトリ内に置きましたので、「@font-face」の部分を以下のように修正します。urlの "fonts/" を "../fonts/" とします。

CSSをインクルードするlinkタグを記述する

Webページのhead要素内に、CSSをインクルードするlinkタグを記述します。

以下は省略があるHTML5の記述です。

アイコンを表示するためのHTMLコードを確認する

アイコンを表示するには、アイコンを表示したい場所のHTML要素にクラスを付与します。

以下のようなフォーマットで記述します。<span>の代わりに<i>を使っても構いません。

上記の[icon名]部分にどのアイコン画像が対応しているかは、「demo.html」をブラウザで表示して確認します。アイコン画像の横に、クラス名が表示されます。

demo.htmlのブラウザ表示画面

アイコンを表示したい場所にHTMLコードを記述する

基本的な記述方法

例えば、以下のように記述します。

実際の表示は以下になります。

 Undo

アイコンの色を変更する

色指定のクラスはデフォルトでは定義されていません。
ここでは以下のようにstyle属性を使って指定してみます。

実際の表示は以下になります。

 Undo

アイコンのサイズを変更する

以下のようにstyle属性を使ってサイズを2倍にしてみます。

実際の表示は以下になります。

 Undo

アイコンをテキストとして文章に挿入する

アイコンを表示するにはbefore疑似要素を使ったクラスを指定しましたが、テキストとして直接文章内に挿入することもできます。

「demo.html」のページで、挿入するUnicodeを確認してください。

demo.htmlのブラウザ表示画面

font-familyに"icomoon"を指定し、以下のように記述します。

実際の表示は以下になります。

Undo   Redo

スポンサーリンク

ページの先頭へ