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

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

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

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

使い方

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

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

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

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

html

css

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

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

まとめ

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

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

スポンサーリンク
  • このエントリーをはてなブックマークに追加
  • Evernoteに保存Evernoteに保存
スポンサーリンク