Font Awesomeとは、アイコンウェブフォントを公開しているサイトです。
ライセンスはこちらをご参照ください。

Font Awesomeは、フォームやタイトルタグ・ハンバーガーメニューなど多数のアイコンが用意されており、あらゆるWebサービスのブランドアイコンまで用意されています。
アイコンフォントなので、CSSで色や大きさも変更でき工夫すれば様々な表現をすることが可能です。

目次

  1. 利用方法：FontAwesomeサイトからCSS又はCDNアドレスを入手
  2. 設置方法 その１：iタグを入れてアイコン表示してみる
  3. 設置方法 その２：擬似要素を使う（before要素のcontentプロパティをコピペして、フォントファミリーと一緒に設置）

利用方法

設置する方法は２つ用意されており、どちらも非常に簡単です。

  1. CSS版のダウンロードして利用
  2. CDN版URLを取得して利用

Get Startedのページを見てみると、上記２つの方法が上下に分かれて説明されています。

以前は、CDN版URLも本サイトに公開されていたのですが、今はメールアドレスをフォームに入力しないと手に入れられないようです。
ちなみに、巷の紹介サイトでは下記URLが紹介されておりました。メールアドレスを登録して送られてくるURLと何が違うのかは確認しておりません。本家サイト通り行った方が無難ではないかと。。

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">

設置方法

専用のCSSをダウンロード、もしくは、CDN(上記参照)を利用し、設定してください。
CSSの他にもSASS/LESS版も公開されているようですが、この場ではCSS版のみ紹介します。

HTMLタグを利用した設置方法

まずはオーソドックスなHTMLを利用した設置方法です。
iconsのページから適当に英単語を入力すると検索結果が表示されますので、
アイコン検索して、要望に叶うアイコンを探してください。

基本的な設置方法は、iタグを利用した方法で、
下記タグ一式を挿入したいhxタグやliタグなどに入れてあげることで、アイコンが表示されます。

<!-- address-bookアイコンの場合 -->
<i class="fa fa-address-book" aria-hidden="true"></i>

擬似要素を利用した設置方法

通常の使い方は、本家で紹介されているiタグを利用した方法ですが、擬似要素で利用したい場合は下記をお試しください。

アイコンの一覧画面や検索結果画面で利用したいアイコンのiタグのCSSを確認します。
（開発ツールを開き、iタグのbefore要素を確認してください）

htmlタグには、beforeが設定されていますので、そこを確認します。（下記参照）
CSSコード

.fa-address-book:before {
  content: "\f2b9";
}

このcontentプロパティが、アイコンになっていますので、コピペ。
挿入したいタグにプロパティを追加します。

これだけでは、文字化けしてしまうだけなので、フォントファミリーにFontAwesomeと記述してあげてください。

無事に表示されたら、後は自由に表現してあげてください。

.fa-address-book:before {
  content: "\f2b9";
  font-family: FontAwesome;
}

Similar Posts