意外と知らない？アイコンはWebフォントでつくるとこんなに便利！

Webフォントでアイコンをつくろう！ ゆとりジェネレーションのほんだです。 最近、Webフォントを使用する仕事に多く携わった関係で、 Webフォントを有効活用したものすっごく素敵なマークアップ方法に気づきました。 ずばり、アイコンやちょっとしたイラストをWebフォントで作成する、というものです。 （以下のデモはGoogle Chromeなど、モダンなブラウザ推奨です。） jsdo.it のシンボルフォントを使用する - jsdo.it - share JavaScript, HTML5 and CSS アイコンを作成するだけだと、あまり新鮮さはありませんが、 CSS3時代のいま、これはとっても有効なマークアップ方法となっています。 詳しくは、つづきからどうぞ！ 色をつける フォントなのでCSS「color:」で指定するだけで色をつけられます。 もちろんマウスオーバー時に色を変更するのも、C

[grandao]

動作テストがめんどくさそう。。。

[mr_mayama]

HTML構造の前にUnicode的に考えておかしい。

[peroon]

アイコンはCSSで

[Mte_Lish]

なるほどぉ( *｀ω´)

[vitaminsii]

Webフォントのちょっとしたテクニック。

[hamuinu]

めもめも。

[kenjou]

WEBフォントについて調べていたら発見。ある程度パターンを作っておけば便利に活用できそうですね。

[sweethova]

Webフォントアイコン

[y_guriko]

見た目はアイコンでもフォントなのだから、なんらかの文字として検索エンジンにキャッシュされてりしないのか気になる。

[mami-hate]

これはすごい！！アイコン画像の色調整の煩わしさから脱却できる！！

[sase]

こんなにブクマついてるじゃん！不勉強だなおれ #typesquare

[netsekai]

意外と知らない？アイコンはWebフォントでつくるとこんなに便利！

[nobuoka]

jsdo.it みてみたけど、web フォントに対応してない環境のことを全く考えてない感じでよくないなー。 一部環境にしか対応してない手法は微妙。 最低でも Unicode の私用領域 (PUA) の文字を使って欲しい。

[piralino]

アイコンをWebフォントで作る

[rion1220]

【重要】

[hidehish]

見てる:

[s5-style]

アイコンやちょっとしたイラストをWebフォントで作成する

[tmge130]

意外と知らない？アイコンはWebフォントでつくるとこんなに便利.

[caligo]

意外と知らない？アイコンはWebフォントでつくるとこんなに便利！／この発想はあったけど、フォント作ったこと無いから敷居が高いなーと思ったら既に配布されてた。

[SasakiTakahiro]

アイコンやちょっとしたイラストをWebフォントで作成。

[richard_raw]

IEでも使えるんですねえ。jQuery Mobileとかで使いたいですな。

[moromoro]

今度の制作で使ってみよう

[m_insolence]

いい！

[hysteric_cat]

なるほど、納得。

[raf00]

なるほど、この取り組み方は面白い。

[pefusan]

　ウェブフォントの小ワザ。

[knakamura1977]

jsdo.itがとても気になる。

[trashtoy]

利点を具体的に解説している上に、セマンティックWEB的に問題があることをちゃんと認識しつつ、妥協案も出しているのがさすが。

[hr07jp]

Webフォントについて

[yanutetsu]

あとで読む

[wideprint]

何かに使えそうだけど、特に必要性を感じない・・・