Font Awesome, the iconic... / Foundation Icons Fonts -... / Typicons他...全5件
![画像アイコンはもう古い!CSSでスタイル自由自在のアイコンWebフォント](https://cdn-ak-scissors.b.st-hatena.com/image/square/51c6725928b1e730e03462c6e55cc55f45195e63/height=288;version=1;width=512/http%3A%2F%2Fw3q.jp%2Fupload%2F2012%2F6%2F27%2Fl_2012-6-27_83dc315674c17426d1da4e11cf4ccd1a.jpg)
Font AwesomeはBootstrapと組み合わせて使えるアイコンを集めたWeb Fontです。 Twitter Bootstrapの便利な機能の一つにアイコンパックがあります。ちょっとした装飾を手軽に付け加えられるのは便利です。そんなBootstrapに200以上のアイコンを追加するのがFont Awesomeです。Web Fontで作られたアイコンパックです。 全てのアイコンです。 ソーシャルアイコンも揃っています。 例です。ドロップダウンやボタンにつけています。 大きさが自由に変更できるのもフォントならではです。 ドロップダウンにつけると機能がより分かりやすくなります。 カスタマイズすればレーティングに使ったりもできます。 ファイル構成です。SVGやフォントが提供されます。 Font AwesomeはTwitter Bootstrapで提供されているものに加えて色々な場面で役立
OpenWeb Iconsはソーシャル系サービスを表現するのに使えそうなWeb Fontです。 文字の横にちょっとしたアイコンを載せるとその意味がぐっと分かりやすくなることがあります。そんな時にはこれまでごく小さなアイコン画像を使うのが一般的でしたが、今回はWeb Fontを使ったOpenWeb Iconsを紹介します。 サンプルです。 実例です。こういう使い方は良いですね。 HTMLでの指定方法です。Bootstrapライクです。 OpenWeb Iconsは現時点で19種類のアイコンが登録されています。EOT/WOFF/TTF/SVGで作成されており、それぞれをCSS上で読み込んで使います。なおBootstrapと組み合わせることで、Bootstrapのアイコンのように指定して使えるようになっています。クラス名に-coloredをつけるとカラーになります。 OpenWeb Iconsは
Web Icon Fonts Webフォントで使えるアイコンセット。IE8以下では使えないです。iOS4.1以下も多分見られない。 _Download(35KB) @font-face{ font-family: 'WebIconFonts'; src: url('WebIconFonts.woff') format('woff'), url('WebIconFonts.ttf') format('truetype'); } .icon { font-family: WebIconFonts; } Arrows !Back! 1Back1 #Forward# 3Forward3 $Up$ 4Up4 %Down% 5Down5 &Done& 6Done6 'Close' 7Close7 (Plus( 8Plus8 )Minus) 9Minus9 Social Networks AAmazon
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く