アイコンをwebフォントとして使う。

フォント css

icomoonからお好みのアイコンをCSSでwebフォント登録して気軽にデザインパーツとして利用できる。

いままで、UI(ユーザーインターフェイス)で使用するデザインパーツをillustratorやphotoshopでイチイチ作成して
た行程がだいぶ楽になる。

まずはicomoonからアイコンをチョイス。

icomoonにアクセスして使いたいアイコンを選択。

選択したアイコンがアクティブ状態になっているので、選びたい物がだいたい決まったら、"font"ボタンをクリック。

選択したアイコン一覧がプレビューされる。


内容を確認したら、"Download"をクリック。

DLされたファイルを確認。

DLされたファイルを解凍すると以下のファイルがある。

  • demo-files(フォルダ)
    • demo.js
    • demo.css
  • demo.html
  • fonts(フォルダ)
    • icomoon.eot
    • icomoon.svg
    • icomoon.ttf
    • icomoon.woff
  • Read Me.txt
  • selection.json
  • style.css

この中で必要なのはfontsフォルダ(とその中身),style.cssだけです。
一つ一つ内容を確認していきます。

style.css内の記述
@font-face {
//(1) urlの中身をディレクトリ階層によっては書き換えます。
	font-family: 'icomoon';
	src:url('fonts/icomoon.eot?wf2uj9');
	src:url('fonts/icomoon.eot?#iefixwf2uj9') format('embedded-opentype'),
		url('fonts/icomoon.woff?wf2uj9') format('woff'),
		url('fonts/icomoon.ttf?wf2uj9') format('truetype'),
		url('fonts/icomoon.svg?wf2uj9#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
	font-family: 'icomoon';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;

	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
//(2) 以下が選択したアイコンの情報
.icon-home:before{ 
	content: "\e600";
	}

まずこのstyle.cssを格納してるcssフォルダと同階層にダウンロードしたfontsフォルダを配置します。
そして、上記のstyle.cssの(1)にあるurl、"fonts/icomoon"の所を"../fonts/icomoon"に書き直してパスが通るようにします。
(2)のアイコン情報については後述します。

htmlにstyle.cssを読み込ませます。

ここで適応させるhtmlにcssを読み込ませた後、ヘッダータグのタイトル文字列の前に
アイコンを表示させます。


配置前
<h2>header</h2>

ここで、前述のstyle.cssの(2)以下に記述してあったアイコン情報。
icon-homeの文字列をhtml上でタグにクラス名として付与する。

//以下のicon-homeをクラス名で使用する。
.icon-home:before{ 
	content: "\e600";
	}


配置設定
<h2 class="icon-home">header</h2>


出力結果




また、文字列の後ろにアイコンを配置させたい場合は
css記述の:beforeを:afterにすることで直せます。

出力結果