IcoMoonはフォントファイルとCSSをダウンロードして使用するタイプのアイコンフォントです。Font AwesomeのようにCDNの読み込みはありません。
デモページはこちら
IcoMoonの公式サイトで使用したいアイコンフォントを選びます。IcoMoon Appのページで最初から登録されているIcoMoon - Freeのアイコンセットが確認できます。使用したいアイコンフォントはクリックして選択状態にします。
IcoMoon App
Libraryからアイコンセットを追加することもできます。Addボタンのアイコンセットは無料で追加できます。Purchaseボタンのアイコンセットは有料、Go Premiumボタンのアイコンセットは有料のpremium memberへの登録が必要です。
なお、Removeボタンのアイコンセットは現在選択されているアイコンセットです。Removeボタンをクリックすることでアイコンセットの選択状態を解除できます。
Library
IcoMoon Appのページで使用するアイコンフォントを選択(複数選択可能)したらGenerate Fontをクリックします。次の画面で選択したアイコンフォントの一覧が表示され、アイコンフォントの名前を変更できます。特に変更がなければそのままDownloadをクリックします。
ダウンロードしたicomoon.zipを解凍して、fontsフォルダとstyle.cssを使用するWEBサイトに設置します。他のファイルは使用しません。
なお設置の際の注意点として、style.cssからfontsフォルダ内のフォントファイルへのパスは設置環境に合わせます。
//style.css内フォントファイルへのパス部分
@font-face {
font-family: 'icomoon';
src: url('fonts/icomoon.eot?sy8hl1');
src: url('fonts/icomoon.eot?sy8hl1#iefix') format('embedded-opentype'),
url('fonts/icomoon.ttf?sy8hl1') format('truetype'),
url('fonts/icomoon.woff?sy8hl1') format('woff'),
url('fonts/icomoon.svg?sy8hl1#icomoon') format('svg');
font-weight: normal;
font-style: normal;
font-display: block;
}
アイコンフォントの使用法は2つあります。1つ目はタグのクラス名にアイコンフォントの名前を指定します。アイコンフォントの名前はダウンロードしたstyle.css内に記述されています。「icon-」から始まる名前になっています。
<p>
<span class="icon-moo"></span>
<span class="icon-rss"></span>
<span class="icon-delicious"></span>
</p>
2つ目はタグに任意のクラス名を付与しCSSの疑似要素を設定します。疑似要素にはfont-family: "icomoon";とcontentプロパティを指定します。contentプロパティで指定する値はダウンロードしたstyle.css内に記述されています。
<span class="rss">RSSのアイコンフォント</span>
.rss:before {
font-family: "icomoon";
content: "\ea9b";
padding-right: 10px;
}