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

関連記事

2022.07.15

HTML・CSS

擬似要素::before、::afterと:hoverの組み合わせ

CSSの擬似要素::before、::afterに:hoverでホバーエフェクトを適用する場合、以下のように:hoverを先、::before、::afterを…

2024.09.21

HTML・CSS

mask-imageを利用したSVGの画像切り抜き

CSSのmask-imageプロパティを利用して、SVGで画像を切り抜きます。デモページはこちら まず、以下をmask.svgとして保存します。 共通のCSSは…

2022.05.12

HTML・CSS

asideタグの使い方

asideタグはメインコンテンツの内容と関連はしているが、メインコンテンツではない補足情報を表します。主に「バナー広告」「関連記事」「サイドバー」「モーダルコン…

2021.02.06

HTML・CSS

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

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

2020.08.30

HTML・CSS

Font Awesomeの使い方

Font Awesomeの公式サイトで使用したいアイコンフォントを選びます。Iconsのページでアイコンフォントの一覧が確認できます。有料版と無料版があり有料版…

上に戻る