Webfontをつかって画像代わりにアイコンを表示

最近の傾向では、アイコンは画像として作らずにWebfontを利用して表示する方法が出てきました。
その方法をMや山くん風にキャプチャを乗せながらトライ。

手順1. 下記のサイトよりシンボル化されたWebfontをダウンロードする

手順2. TTFやOTFしか提供されていない場合は、@FONT-FACE GENERATORをつかって、WOFF、EOT、SVGなどのファイル形式に変換し、ダウンロードします。

@FONT-FACE GENERATORへのリンク

- http://www.fontsquirrel.com/fontface/generator

手順3. ダウンロードした複数のファイルを移動します。（同じ階層にとりあえず・・・）

手順4. HTMLとCSSを編集します。（詳しくはコメントに記載）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Webフォントをつかってアイコンを表示する</title>
<link rel="stylesheet" href="style.css" media="screen,print">
</head>

<body>
<ol>
<li><div class="one"></div>メニュー1</li>
<li><div class="two"></div>メニュー2</li>
<li><div class="three"></div>メニュー3</li>
<li><div class="four"></div>メニュー4</li>
<li><div class="five"></div>メニュー5</li>
</ol>
</body>

</html>

@font-face {
    font-family: 'MyWebFont';
    /* フォントファイルを読み込む */
    src: url('websymbols-regular-webfont.eot'); /* IE9対策 */
    src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8対策 */
         url('websymbols-regular-webfont.woff') format('woff'), /* Modern Browsers対策 */
         url('websymbols-regular-webfont.ttf')  format('truetype'), /* Safari, Android, iOS対策 */
         url('websymbols-regular-webfont.svg#svgFontName') format('svg'); /* Legacy iOS対策 */
    }

/* before擬似クラスで要素の前に表示 */
.one:before {
  font-family: "MyWebFont";
  content: "A";
}
.two:before {
/* MyWebFontを拾う */
  font-family: "MyWebFont";
/* A.B.Cという記号で、アイコンの種類を取得 */
  content: "B";
  color: orange;
}
.three:before {
  font-family: "MyWebFont";
  content: "C";
  /* アイコンのカラーも変更できます */
  color: grey;
}
.four:before {
  font-family: "MyWebFont";
  content: "D";
}
.five:before {
  font-family: "MyWebFont";
  content: "E";
  color: green;
}

/* 以下スタイルの整形 */
div {
	width: 30px;
	float: left;
	display: inline;
	text-align: right;
	margin-right: 10px;
}
ol {
	list-style-type: none;
}

完成！　アイコン画像は、作らなくてもハイクオリティーなものが色々ありますので便利です。

http://felica.boy.jp/icon-webfont/