読者です 読者をやめる 読者になる 読者になる

求職者支援訓練webサイト制作科授業資料

フェリカテクニカルアカデミー池袋の求職者支援訓練webサイト制作科7月クラスの授業解説ブログです。

Font Awesomeの使い方

f:id:yachin29:20161012134548j:plain

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


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

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

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

Font Awesome

その中でも一番メジャーなのがこの「Font Awesome」
企業やSNSのアイコンなども揃っていて、非常に便利なので使い方をしっかりと覚えましょう。

Font Awesomeの使い方

使い方は非常に簡単で、まずは「Font Awesome」を使う為のCSSファイルをリンクさせましょう。新しいアイコンが色々と増えているので必ず最新バージョンのCSSファイルをCDNでリンクさせましょう。

ここで最新バージョンのCSSファイルのCDNアドレスが取得出来ます。
https://www.bootstrapcdn.com/fontawesome/


次にiタグにそれどれのアイコンに割り振られてあるclass名を入れるだけです。

<i class="fa fa-camera-retro fa-lg"></i>

背景画像で使いたい場合は少しやり方が変わります。
cssの疑似要素であるbefore・afterのcontentプロパティを使用するのですが、contentプロパティにはHTMLを挿入することは出来ないで、代わりに、各アイコンにセットされている「Unicode」を使用します。

f:id:yachin29:20161012140507j:plain

h1:before {
  content: "\f139";
  font-family: FontAwesome;
}

もちろん「Font Awesome」その他にも色々なwebアイコンがあります。

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

webiconfonts.appspot.com
※OFLライセンス

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

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

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

広告を非表示にする