2021.02.01

HTML・CSS

IcoMoonの使い方

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;
}

関連記事

2021.01.30

HTML・CSS

CSS疑似要素のcontentプロパティにcounter関数で連番を指定

デモページはこちら CSS疑似要素のcontentプロパティに、CSSのcounter関数で連番を指定します。JavaScriptは使用せず、CSSのみで実装し…

2021.02.06

HTML・CSS

高さを判定してoverflow-yプロパティで縦スクロール

画面の高さが要素の高さよりも低くなった場合、要素にoverflow-yプロパティを適用して要素内のコンテンツを縦スクロールで表示します。デモページはこちら 画面…

2022.08.30

HTML・CSS

linear-gradientを利用した文字の下線

background-imageプロパティのlinear-gradientを利用して複数行の文字に下線を引きます。複数行に対応させるため、inline要素に適用…

2021.07.06

HTML・CSS

background-imageプロパティを利用した高さ可変の三角形

borderプロパティで三角形を作成した場合、高さを可変にすることができません。そこで、background-imageプロパティのlinear-gradien…

2020.06.27

HTML・CSS

iOSのブラウザでセレクトボックスの文字を省略せずに表示

iOSのブラウザではセレクトボックスに長いテキストの選択肢がある場合、途中で省略して表示されます。省略記号「…」が付いて選択肢が最後まで読めません。これを全て表…

上に戻る