icon fontとfont-faceを使ったアイコンの表示

CSS-TRICKSに面白いアイコンの表示方法が紹介されていて、触発されたのでサンプルを作ってみた。

Icon Fonts are Awesome | CSS-TRICKS

上記URLのデモはアイコンの様なフォント(というかアイコン)をCSS3のfont-faceを使って表示するというもの。
ここでは空の要素にafter/before疑似要素を使って文字を出してるが、そこはめんどくさいので割愛。

CSS3を使えばwebkit向けであればマスクを使う事ができるので、フォントにグラデーションも掛けてみた。(Androidは現時点でテキストのグラデーションは使えないけど。。)

サンプルページ

fontなのでどれだけ拡大してもアイコンがぼやけることもないし、スマートフォンであれば解像度別に画像を用意する必要もないので非常に便利ですね。
英数字+日本語までいれると用意できる数には問題ないですし、文字自体をCSSの擬似要素で出せばHTML的にも問題ないので個人的にはとても使いたいテクニック。

Androidさえいなければ。。。

デモで使ったフォントは以下のフリーフォントを利用させてもらいました。

Free Icon Font Pack | offset media

icon fontとfont-faceを使ったアイコンの表示

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です