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

関連記事

2020.11.04

HTML・CSS

inline要素のマージン

デモページはこちら inline要素にCSSでマージンを設定した場合の挙動です。以下のhtml構造のspanタグでテストします。 inline要素に左右のマージ…

2022.05.14

HTML・CSS

positionプロパティのstickyの使い方

positionプロパティのstickyの使い方と注意点です。divタグに以下のCSSを適用して動作を確認します。 デモページはこちら positionプロパテ…

2022.05.11

HTML・CSS

CSSのcalc記述時の注意点

CSSのcalcはCSS3で追加された関数です。calc記述時は以下の点に注意が必要です。 加算・減算の演算子の左右には半角スペースが必要 乗算は掛けられる方(…

2024.09.02

HTML・CSS

box-shadowとfilter: drop-shadowの違い

box-shadowプロパティとfilterプロパティのdrop-shadowを比較して違いを確認します。デモページはこちら filter: drop-shad…

2020.07.18

HTML・CSS

CSSアニメーションで画像を横スクロール無限ループ

CSSアニメーションで画像を横スクロール無限ループさせます。まずhtmlのコードです。同じ画像を2つ配置して、クラス名loop_wrapのdivタグで囲います。…

上に戻る