[記事数: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フォントを提供してた。これはWebフォントの大転換になるかも? | 編集長ブログ―安田英久 | Web担当者Forum Googleの日本語対応無料フォント「Noto Sans CJK」|及川WEB室 ...
ダミー画像を簡単に生成できるジェネレータ... Placehold.jp|ダミー画像生成 モック用画像...
イベントサイトまとめ   //   グループA Developers Summit 2016 - Hack the Real 楽天 新春カンファレンス 2016 TOKYO DESIGN WEEK 説明会のご案内|TOKYO DESIGN WEEK 東京デザ...
黒・ブラックのWEBサイト、ホームページのまとめ... (adsbygoogle = window.adsbygoogle || []).push({}); h3.widget-title { position: relative; padding-bottom: .5em; border-bottom: 1px solid ...
手書き風デザインにピッタリなデザイン欧文フォント 30... 手書き風デザインにピッタリなデザイン欧文フォント 30 | NxWorld
PCのフォントを一覧表示できるWEBサービス... 自分のPCに入っているフォントを一覧表示してくれるサービス wordmark wordmark.it - helps you choose fonts! fontview FONTVIEW.info | PCにインストールされているフォント...
ポケモンGO風のロゴを作成する無料のフォント「Pocket Monk」... 1.ダウンロード 2.解凍 3.インストール ■Adobe Fireworksの場合 1.文字入力、フォント指定、テキストカラー指定 2.図形で円を描き テキスト>パスに結合 3.段落のインデントで位置を調整 4.右クリックのパスに変換、グループ解除 5.ライブフィルターで加...
ノンデザイナーのための25のグラフィックデザインのコツ... 【翻訳】ノンデザイナーのための25のグラフィックデザインのコツ | POSTD
無料で使える日本語フォント20選 1.はんなり明朝 フリーフォント界で有名な明朝体です。 不動の人気を誇っていますね。アクセス数も一番です。 →はんなり明朝 2.大甘書道体 テレビアニメ銀魂の次回予告タイトルに使われている、豪快な毛筆体です。 特に銀魂ファンには嬉しいフォントですよね! →大甘書...




コメントを残す