[B! font][icon] fugashiのブックマーク

Icons | Font Awesome

The internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.

fugashi 2015/09/11

font
icon

リンク

Retinaでもボケない「シンボルアイコン」を使いこなそう！ | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作

どうも！デザイナの王です。 2012もいよいよ12月を迎え、果てして2013年は来るのかと、わくわくしている今日この頃です。ここ最近、AppleのRetinaを皮切りに、超高精細ディスプレイが色んなメーカーから出ているニュースが目に付く。有名所ではシャープのIGZO（約500ppi）、ジャパンディスプレイのLTPS（約650ppi）などがありますよね、iPhoneのRetinaをぶっちぎりで凌駕してしまうという！4K時代の到来を予感させる！（その前に地球が終わらなければいいのだが！）ということで、来るRetina全盛時代に備えるべく、どんなにモンスター級の高解像度のデバイスでも綺麗に表示する「シンボルフォント」を最近使い始めました。今回はそんな素敵なシンボルフォントの導入法を紹介したいと思います。そもそも♥「シンボルフォント」♥って何？読んで字の如し、「図形のフォント」です。タイ

fugashi 2012/12/13

リンク

ソーシャルアイコンをWebフォントで表示する方法を色々ご紹介

twitterやFacebookなどのソーシャルメディア関連のアイコンを表示しているサイトはよく見かけますが、そのほとんどは画像だと思います。今回、Webフォントを使って表示する方法を紹介しますので参考になればと思います。実物は別サーバーにアップしていますので、こちらでご確認ください。今回はWeb Symbols typefaceさんのアイコンを使わせていただきました。で、まず最初にアイコン形式のフォントを読み込む設定をします。 @font-face { font-family: 'WebSymbolsRegular'; src: url('websymbols-regular-webfont.eot'); src: url('websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'), url('webs

fugashi 2012/10/23

リンク

Web Icon Fonts | chibatch.jp

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

fugashi 2012/10/23

icon
font

リンク

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

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