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

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

Font-Awesomeの使い方

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

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

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

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

Font-Awesomeの導入方法

https://fontawesome.com/get-started/web-fonts-with-css
上記のアドレスより外部ファイル化されたCSSファイルのリンクをコピーして、自身のhtmlファイルにリンクする。

HTMLファイルに表示させる場合

表示させたいアイコンのiタグをコピーし、body内にペースト

<p><i class="fas fa-ambulance"></i>救急車</p>



他にもwebアイコンは多数あります。
http://genericons.com/genericons.com
GPLライセンス(ライセンス明示すればほぼ自由に Web フォントに利用できます。)

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

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

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

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