[記事数:1,202] 日本を元気にするキーワード、地域活性化×中小企業× ITのTips and Quotes(秘訣と引用文)
creative  link  memo 

アイコンフォントまとめ



アイコンフォントのメリットですが、

  • フォントなのでテキストとのベースラインが合わせやすい
  • フォントなので拡大縮小はcssのfont-sizeで指定出来る
  • フォントなのでcssで簡単に色を変えられる
  • ベクターデータなので背景色があるときなどのエッジの処理を気にしなくていい。

があります。

デメリットとして単一の画像よりは一度に複数のアイコンデータを読み込むので、データ量が多くなる(重くなる)というのがあります。

Font Awesome

fa-lg
fa-2x
fa-3x
fa-4x
fa-5x





normal
fa-rotate-90
fa-rotate-180
fa-rotate-270
fa-flip-horizontal
fa-flip-vertical





Genericons

genericons



Foundation Icon Fonts 3

foundation-icon-fonts-3

IcoMoon

IcoMoon App

Web制作で使えそうなアイコンフォント





FavoriteLoadingお気に入りAdd to favorites
自社サイトをぐっと見やすくする3つのコツ... ユーザビリティを無視した配置になっていないか? ①一般的な配置か?(奇をてらっていないか?) ②視線の流れ(Z型、F型)を意識しているか? ③画像や文字をそろえているか? 色を使いすぎていないか? 文字は見やすいか? ①カタカナ・ひらがなの文字をつめる。 ②句読点などの記号...
Webデザインの見本サイトまとめ webデザインのリンク集+α |Design-trigger - webクリエイターのための参考サイト WEBデザインの見本帳|WEBデザイナーのためのデータベース・リンク集、サンプル・配色・参考・ご提案に!! 縦長のwebデザインギャラリー・サイトリンク集|MUUUUU.ORG Webデ...
イベントサイトまとめ   //   グループA Developers Summit 2016 - Hack the Real 楽天 新春カンファレンス 2016 TOKYO DESIGN WEEK 説明会のご案内|TOKYO DESIGN WEEK 東京デザ...
PCのフォントを一覧表示できるWEBサービス... 自分のPCに入っているフォントを一覧表示してくれるサービス wordmark wordmark.it - helps you choose fonts! fontview FONTVIEW.info | PCにインストールされているフォント...
店舗デザイン・設計・内装工事サイトデザインまとめ... (adsbygoogle = window.adsbygoogle || []).push({}); h3.widget-title { position: relative; padding-bottom: .5em; border-bottom: 1px sol...
飲食店サイトまとめ (adsbygoogle = window.adsbygoogle || []).push({}); h3.widget-title { position: relative; padding-bottom: .5em; border-bottom: 1px sol...
グーグルが日本語Webフォントを提供してた。... グーグルが日本語Webフォントを提供してた。これはWebフォントの大転換になるかも? | 編集長ブログ―安田英久 | Web担当者Forum Googleの日本語対応無料フォント「Noto Sans CJK」|及川WEB室 ...
ノンデザイナーのための25のグラフィックデザインのコツ... 【翻訳】ノンデザイナーのための25のグラフィックデザインのコツ | POSTD
ダミー画像を簡単に生成できるジェネレータ... Placehold.jp|ダミー画像生成 モック用画像...
手書き風デザインにピッタリなデザイン欧文フォント 30... 手書き風デザインにピッタリなデザイン欧文フォント 30 | NxWorld




コメントを残す