Font Awesomeとは：使い方やカスタマイズ方法について

Font Awesomeとは

Font Awesomeとはご自身のWebサイトで様々なWebアイコンフォントを簡単に表示できるようにしてくれるサービスです。

Font Awesome公式サイト

Font Awesomeはウェブサイトやウェブアプリケーションに簡単にFont Awesomeを組み込むことができ、豊富なWebアイコンフォントを提供します。

アイコンを利用するためにimg要素を読み込む必要がなく、サイズや色、回転などのアニメーションが簡単に設定できます。

2022年にFont Awesomeのバージョン6がリリースされ、有料版で利用できるアイコンの数が大幅に追加されました。

Font Awesomeの特徴

Font Awesomeの特徴は以下の通りです。

Font Awesomeのプラン：有料版と無料版の違い

Font Awesomeには「Free」「Pro」「Pro Max」の3つのプランが用意されています。

有料プランで最も人気がある「Pro」は年間99ドル（約1万5000円）です。無料プランでも十分すぎるほどの機能が備わっています。

無料プランと有料プラン「Pro」の違いは以下の通りです。

• 無料プランでは2,000以上のアイコンが利用でき、有料プランではそれに加えて数万ものProアイコンが利用できる
• 無料プランで利用できるFont Awesome Kitsは１つ、有料プランでは20個利用できる
• Font Awesome Kitsによるページビュー数が無料プランでは10,000、有料プランでは1,000,000
• 有料プランでは独自のアイコンをアップロード可能
• 有料プランでは使用できるアイコンのスタイルが増加

Font Awesome Kitsから読み込む（推奨）

Font Awesomeのバージョン5以降からKitsがFont Awesomeに導入されました。このKitsとはFont Awesomeのアイコンをウェブプロジェクトに組み込むためのツールです。バージョン管理や設定変更がWeb上で行えるようになります。

Font AwesomeはこれまでのCDNを廃止してKitsに移行しています。最新のFont AwesomeではCDNはなくなり、Kitsのみとなっています。そのためこれからFont Awesomeの利用を考えている人は、公式が推奨しているKitsを利用することがお勧めです。

Kitsを使用するにはアカウントを作成する必要があります。アカウントを作成したらサインインしてみましょう。

サインイン後のページからKitsの設定や状態を確認できます。Kitsの埋め込みコードは以下の流れで確認できます。

1. Kitsにある「Your Kits」をクリックする

2. 対象のKitsから「Settings」をクリックする

3. 表示されたページから「Set Up」タブをクリックするとコードが表示される

上記の流れで確認したコードをheadタグ内などに貼り付けることでFont Awesomeの読み込みができます。

CDNから読み込む（非推奨）

Font Awesomeの公式ではCDNは非推奨となっていますが、現在でも利用することが可能です。

公式サイトからCDNのコードはなくなっていますがCDNJSというサイトでFont Awesomeで利用できるアイコンを配信しています。

CDNJS – Font Awesome

Font Awesomeのバージョン５であれば以下のコードをheadタグ内に埋め込めば利用できるようになります。

<script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>

サーバーにファイルを配置して読み込む

Font AwesomeのサービスやCDNサーバーがダウンしても利用できるように、ご自身のサーバーにファイルを配置して読み込むこともできます。

Font Awesomeのファイルは以下の流れでダウンロードできます。

1. サインイン後のページでFont Awesome Iconsの「Download」をクリックする

2. For the Web内の「Free For Web」をクリックする

上記の操作によりFont Awesomeのファイル群がダウンロードできます。ダウンロードされるのはZIPファイルで「fontawesome-free-6.5.1-web.zip」のようなファイル名です。

利用する際は解凍してwebfontsフォルダとcssフォルダを所定の場所に配置します。詳しくは以下ページをご覧ください。

Font Awesome – Hosts Yourself

使用するアイコンを選択する

まずはFont Awesomeのサイトから利用したいアイコンを見つけましょう。アイコンを探す際はFont AwesomeのSearchページが利用しやすいです。

Font Awesome – Search -

無料で利用できるアイコンを探す場合は「Free」をクリックして絞り込みましょう。

HTMLを記述する

気に入ったアイコンを見つけたらクリックしましょう。次図のような画面が表示されます。

ここからコードをクリックするとコードが自動的にコピーされるので、あとはアイコンを表示したい場所に貼り付けるだけです。

CSS疑似要素でアイコンを表示する

CSSの疑似要素でFont Awesomeのアイコンを使用する場合は以下のようにアイコンのUnicodeを使います。

.class_name::before {
  content: '\f015';
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
}

上記ではcontentにUnicode「\f015」を指定しています。

アイコンのUnicodeは次図のようにアイコンページに記載されています。Unicodeをクリックすると自動的にコピーされます。

アイコンの大きさを変更

アイコンフォントのクラスに以下コードを指定することでサイズを変更することができます。

アイコンの色を変更

Font AwesomeのアイコンはWebアイコンフォントであるため、スタイルでcolorプロパティを指定することで色を変更できます。

<i class="fa-solid fa-user fa-3x" style="color: #63E6BE;"></i><i class="fa-solid fa-user fa-3x" style="color: red;"></i>

アイコンの横幅を揃える

Font Awesomeで利用できるアイコンはそれぞれ横幅が異なります。アイコンの横幅を揃えたい場合はクラスにfa-fwを追加します。

<i class="fa-solid fa-user fa-3x fa-fw"></i>

アイコンを線で囲う

アイコンの周りを線で囲いたい場合は、クラスにfa-borderを追加します。

<i class="fa-solid fa-user fa-3x fa-border"></i>

アイコンにアニメーションを追加する

アイコンフォントにアニメーションを追加することができます。以下のコードをアイコンフォントのクラスに指定することでアニメーションをつけられます。

角度の変更

アイコンを表示する角度を変更することができます。以下コードをアイコンのクラスに追加することで希望する角度に傾けて表示できます。