[Web Font]Webフォントを使って洒落たメニューをおっさんが作ってみる。

WebFontって使ったことないなー。
でアイコン的に使ってみた。

ちょっと洒落たメニュー作ってみたよ。

今回使ったのは「Font Awesome」
ダウンロードしたファイルを解凍するとcss,fonts,less,scssの4つのフォルダが入ってます。
使用するのはcssとfontsのみ。

使い方

まずはhead内にcssをリンクしましょう。

<link rel="stylesheet" href="css/font-awesome.min.css">

これだけでWebフォントは利用できます。ちなみに以下。

<i class="fa fa-home"></i>

と書いてあげるだけで家のアイコンが表示されます。（デモのHomeアイコン）
その他のアイコンは「The Icons」で確認できます。（多くて探すのめんどうだけど・・・）

これじゃつまらんのー。ってことでサンプル的なメニューを。

html

<ul>
	<li><a href="#"><i class="fa fa-home"></i>Home</a></li>
	<li><a href="#"><i class="fa fa-male"></i>About Us</a></li>
	<li><a href="#"><i class="fa fa-cloud-download"></i>Download</a></li>
	<li><a href="#"><i class="fa fa-facebook-square"></i>Facebook</a></li>
	<li><a href="#"><i class="fa fa-twitter-square"></i>Facebook</a></li>
	<li><a href="#"><i class="fa fa-google-plus-square"></i>Google +</a></li>
	<li><a href="#"><i class="fa fa-github"></i>GitHub</a></li>
</ul>

css

ul {list-style:none; width:250px; border:1px solid #ccc; border-radius:6px; margin:0; padding:0; overflow:hidden;}
li {margin:0; padding:0;}
a {display:block; background:#666; text-decoration:none; padding:4px; color:#ccc; border-bottom:1px dotted #fff;}
li:last-child a {border-bottom:none;}
a:hover {background:#eee; color:#666;}
a:hover i {color:#000;}
i {width:25px; text-align:center; color:#fff;}

色とか色とか色は適当に変更してください。

以上でデモの様なメニューは完成です。

まとめ

ザッと確認したところIE8以上は大丈夫みたいです。

なんかめんどくせーなーと思っていたWebフォントですけど、意外とあっさり実装できてデザインの幅は広がりそうですねー。