アイコンをウェブフォントで表示する方法

簡単にアイコンのライブラリを作成できる「IcoMoon App」

IcoMoonAppは、自由にアイコンのウェブフォントライブラリを制作できるWebサイトです。利用方法も非常に簡単なので、是非試して欲しい無料サービスです。

• IcoMoon App - Icon Font, SVG, PDF & PNG Generator

ライブラリに格納したいアイコンを選択する。

左上の矢印アイコンを選択した状態で、アイコンを選択します。黄色の枠が付いたアイコンが選択されているアイコンです。黄色の枠が付いている状態で、再度クリックすれば、選択解除されます。
また、ゴミ箱のアイコンはアイコンの削除、四方の矢印アイコンは順番の変更、鉛筆のアイコンはアイコンの編集が可能です。

自作アイコンの追加

アイコンの追加方法は2つあります。1つは左上のImport Iconsのボタンです。制作したアイコン(サイズ：256×256、色：rgb(75, 75, 75)、形式：svgを推奨)のインポートが可能です。ボタンをクリックし、インポートしたいアイコンを選択すれば、登録したアイコンが画面上に表示されます。登録したアイコンは矢印アイコンで選択すれば、利用可能です。

既存ライブラリの追加

ページをスクロールすると登場する「Add Icons From Library…」をクリックすると、アイコンのライブラリページが表示されます。こちらには無料で利用できるライブラリがあるので、そこから追加することが出来ます。

ウェブフォントを作成する。

ライブラリに格納するアイコンを選択したら、右下の「Gennerate Font」をクリックします。クリックすると、画面が切り替わるので、右下の「Download」をクリックし、フォントライブラリをダウンロードします。

ダウンロードファイルを確認する。

アイコンのウェブフォントとして利用するファイルは、fontsフォルダに格納されているフォントデータとstyle.cssです。

style.cssの確認

style.cssを確認してもらうと、font-faceでウェブフォントの指定がされていると思います。
※ font-family名は適宜変更してください。
ここに、フォントデータへのパスが記述されているので、利用する際は、パスに注意してください。次に、[class^="icon-"], [class*=" icon-"]という記述が確認できると思います。これは、それぞれ次の意味を表しています。

[class^="icon-"]・・・class という名前の属性の値が、icon- で始まる要素
[class*=" icon-"]・・・class という名前の属性の値が、文字列中に icon- を1つ以上含む要素を表します。

この箇所については、他のclassとの兼ね合いもあるので、適宜変更を行います。
最後に、下部の方にはアイコンを表示させるためのclassとプロパティ指定されています。デフォルトでは、ライブラリを作成した際の色になっているので、colorを指定することで色を変更できます。

.icon-home2:before {
	content: "\e901";
	color: #FF0000;
}

class名は作成したライブラリ毎に異なります。

HTMLに記述する。

作成したfontsフォルダとstyle.cssを利用するHTMLにリンクさせます。リンクが上手く出来ていれば下記の記述でアイコンが表示されます。

<i class="icon-home2"></i>

<i>タグはHTML5では、声や心の中で思ったことなど、他と区別したいテキストを表す際に使用します。今回はアイコンなので、他と区別したいテキストとして<i>タグを採用しています。

以上で、ウェブフォントを利用したアイコンの設定は完了です。慣れてしまえば、簡単に自由にアイコンライブラリを作成、利用できるので参考にしてみてください。

コラム カテゴリ

コラム一覧