makurazaki.org
[Web Font]Webフォントを使って洒落たメニューをおっさんが作ってみる。 | Maku_zin Ver2.1.1
WebFontって使ったことないなー。 でアイコン的に使ってみた。 ちょっと洒落たメニュー作ってみたよ。 今回使ったのは「Font Awesome」 ダウンロードしたファイルを解凍するとcss,fonts,less,scssの4つのフォルダが入ってます。 使用するのはcssとfontsのみ。 使い方 まずはhead内にcssをリンクしましょう。 これだけでWebフォントは利用できます。ちなみに以下。 と書いてあげるだけで家のアイコンが表示されます。(デモのHomeアイコン) その他のアイコンは「The Icons」で確認できます。(多くて探すのめんどうだけど・・・) これじゃつまらんのー。ってことでサンプル的なメニューを。 html css 色とか色とか色は適当に変更してください。 以上でデモの様なメニューは完成です。 まとめ ザッと確認したところIE8以上は大丈夫みたいです。 なんかめんどくせーなーと思っていたWebフォントですけど、意外とあっさり実装できてデザインの幅は広がりそうですねー。