webサイト制作の勉強|2017月7月クラスブログ

webサイト制作の勉強に関する解説ブログです。

アイコンをwebフォントで表示

以前、授業でGoogleのwebフォントを使用してみましたが、最近はテキストだけでなくアイコンもwebフォント化されていて、それを使用しているサイトもよく見かけます。

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

などのメリットがあるのでレスポンシブデザインなどでよく使われます。
使用するアイコンフォントをダウンロードして使用するものもあれば、CDNで利用可能の物もあります。

fortawesome.github.io
※OFLライセンス(ライセンス明示すればほぼ自由に Web フォントに利用できます。)

http://genericons.com/genericons.com
GPLライセンス(ライセンス明示すればほぼ自由に Web フォントに利用できます。)

http://webiconfonts.appspot.com/webiconfonts.appspot.com
※OFLライセンス

www.webalys.com
※クレジット・リンク不要、商用可能

iconmonstr.com
※クレジット・リンク不要、商用可能

pictogram2.com
※クレジット・リンク不要、商用可能