SilkTricky / WOW / Form Follows Function他...全14件
![Webデザイナーなら押さえておきたい、今月の優れたWebデザイン(2013年1月)](https://cdn-ak-scissors.b.st-hatena.com/image/square/39c9f3c6edc4b1e7b3606048accae44084d14b1f/height=288;version=1;width=512/http%3A%2F%2Fw3q.jp%2Fupload%2F2013%2F1%2F31%2Fl_2013-1-31_73c5c95f94d942b5866e468c2605ae23.jpg)
SilkTricky / WOW / Form Follows Function他...全14件
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
ちょっと面白かったのでメモ。 ミニマルなアイコンやシンボル をWebフォントとして使えるよう にしてくれたフリーフォント、 Web Symbols typefaceのご紹介 です。割と嬉しいかもw 以前、シンボルやアイコンタイプのフォントをご紹介しましたが、こちらは最初からWebフォントとして使う目的で作ったそうです。 アイコンをWebフォントにすることで、毎回アートディレクターにスライス等を頼まずにすむんや!って言ってました。 あんまり大きいサイズにするとちょっとアレですけどね・・ミニアイコンとして使うことのほうが多そうなのであんまり気にならないかな。css3でエフェクトをつけるのも面白いかもです。 こんな感じで使う。 css@font-face{ font-family: 'MyWebFont'; src: url('WebFont.eot'); src: url('WebFont.e
We Love Icon Fonts We must stop here, this is icon fonts country! What? This is a free & open source icon fonts hosting service (like Google Web Fonts, but icon fonts only). Hurray! Caution! This is a public gamma. Use this service for mockups, reduced test-cases or CodePens, but not on productive systems!
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く