Webサイトに Font Awesome 5 を導入する方法

Font Awesome 5 の使い方をご紹介します。

1. Font Awesome とは？
2. Font Awesome 5 の2つのフレームワーク
3. Free版と Pro版
4. スタイルは4種類
5. SVG with JS の 2つの導入方法
- CDN を使う方法
- 自分で用意した Font Awesome のファイルを読み込む方法
6. Web Fonts with CSS の 2つの導入方法
- CDN を使う方法
- 自分で用意した Font Awesome のファイルを読み込む方法
7. アイコンの探し方と使い方
- アイコンの探し方
- アイコンの使い方
8. おわりに

1. Font Awesome とは？

Font Awesome は、「Web上に表示するためのアイコン集」と、「それを表示するためのツールセット」を合わせたものです。

Webサイトに Font Awesome を導入すると、例えば、

<i class="fas fa-user fa-lg"></i>

と書けば、

という表示になりますし、

  <i class="fas fa-spinner fa-spin fa-2x"></i>

と書けば、

と表示されます。

このように、簡単にアイコンを使うことができる便利なツールです。

2. Font Awesome 5 の2つのフレームワーク

Font Awesome 5 には 2つのフレームワークがあります。「SVG with JS」と「Web Fonts with CSS」です。

SVG with JS

Font Awesome 5 で新たに導入されました。こちらがメインになったようです。
アイコンは SVG画像として表示されます。
JavaScriptにより、i要素が svg要素に書き換えられます。
新しい機能が使えます。
公式サイトの説明ページ： How to Use | SVG with JavaScript

Web Fonts with CSS

アイコンは Webフォントとして用意されます。
CSSのクラスを使って Webフォントを表示する仕組みです。
Font Awesome は元々この方式でした。「クラシックな方式」とも呼ばれるようになりました。
公式サイトの説明ページ： How to Use | Web Fonts with CSS

どちらを使えばよいのか？

メインのフレームワークである「SVG with JS」を使えばよいと思います。
それで何か問題があるようなら「Web Fonts with CSS」に変更すればよいです。
「SVG with JS」でしか使えない機能というのは、それ程たくさんあるわけではありませんし、「Web Fonts with CSS」でもいろいろな機能が使えます。

3. Free版と Pro版

無料の Free版と、有料の Pro版があります。

本ページでは、Free版を使って説明します。

4. スタイルは4種類

アイコンによって、スタイルが 4種類あります。

Solid（塗りつぶし）
Redular（通常）
Light（細い）
Brands（ブランドアイコン）

公式サイトには以下の表で比較されています。

例えば、「comments」というアイコンには「Solid」「Regular」「Light」の3種類のスタイルが用意されています。

これらのスタイルを使い分けるには、i要素に指定するクラス名を変えます。

例えば、この「comments」アイコンの場合、

Solid を使うなら、

<i class="fas fa-comments"></i>

Regular を使うなら、

<i class="far fa-comments"></i>

と書きます。fas と far の違いです。

※「PRO」と書いてあるスタイルは、Free版だと使えません。

5. SVG with JS の 2つの導入方法

Get Started | SVG with JS に書いてある通りなのですが、2つの方法があります。

CDN を使う方法

Font Awesome のファイルを自分では用意せず、fontawesome.com に予め設置されている JavaScriptファイルを読み込ませるだけの方法です。ラクです。

CDN とは？

CDN は Content Delivery Network の略で、インターネット上に分散されたサーバーに予めコンテンツを配置しておく技術のことを指します。それぞれのユーザーに最も近いサーバーからコンテンツを返すことができるので、大量のアクセスを効率よく捌くことができます。

Font Awesome のような有名なライブラリは、大量のWebサイトで使用されます。決まったファイルを、それぞれの Webサイトが自分のサーバーに配置するのは効率が悪いです。利用する Webサイト側から見ても作業がラクになりますし、自サーバーへのアクセス負荷も抑えられます。しかも、CDNは速いので Webページの読み込み速度的に悪い影響もほとんどありません。そのため、Webサイトで利用できる有名なライブラリは、CDN でも使えるようになっていることが多いです。

但し、CDN側で障害が起きた場合は当然その影響を受けます。ですので、それを避けたいのであれば、自サーバーにファイルを設置して利用することになります。

まず、Get Started | SVG with JS にアクセスします

Free版なのか Pro版なのか？を選択します。通常は「Free」でよいでしょう。

使用するスタイルを選択します。通常は「All」でよいでしょう。

バージョンを選択します。特に問題なければ、最新版でよいでしょう。

以上を選択すると、それに対応した <script>タグがその下に出力されます。

ここのアイコンをクリックすると、出力された <script>タグがクリップボードにコピーされます。

あとは、Font Awesome を使いたい Webページの <head> と </head> 内にペーストするだけです。

例えば、「Free版」「全てのスタイル」「バージョン 5.0.9」の場合は、以下の記述となります。

<script defer src="https://use.fontawesome.com/releases/v5.0.9/js/all.js" integrity="sha384-8iPTk2s/jMVj81dnzb/iFR2sdA7u06vHJyyLlAd4snFpCl/SnyUjRrbdJsw1pGIl" crossorigin="anonymous"></script>

たったこれだけの作業で、「<i class="fas fa-adjust"></i>」などと HTMLファイルに記述すれば、「」と表示してくれます。

自分で用意した Font Awesome のファイルを読み込む方法

こちらは少々面倒ですが、外部のサーバーへ依存せずに済みます。

まず、Font Awesome にアクセスします。

「Download Free」ボタンを押してファイルをダウンロードします。

本記事執筆時では、fontawesome-free-5.0.9.zip ファイルがダウンロードされました。

これを解凍します。

解凍してできた fontawesome-free-5.0.9 には、「SVG with JS」用のファイルや「Web Fonts with CSS」用のファイルなどが全て入っています。これをそのままサーバーにアップロードして使ってもよいのですが、サーバー上のディスク容量がもったいないですので、「SVG with JS」に必要なファイルのみをサーバーにアップロードして使うことにします。

必要なファイルは、fontawesome-all.min.js ファイルだけです。

fontawesome-free-5.0.9 –> svg-with-js –> js –> fontawesome-all.min.js

このファイルをサーバーにアップロードします。

Font Awesome を利用するWebページのHTMLでは、<head>タグ内に以下のように <script>タグを記述します。ここで、fontawesome-all.min.js を読み込ませます。

<head>
  <!--load everything-->
  <script defer src="path/to/fontawesome-all.min.js"></script>
</head>

以上です。CDN を使う場合と比べて、それ程作業量は多くありませんね。

6. Web Fonts with CSS の 2つの導入方法

CDN を使う方法

Get Started | Web Fonts with CSS にアクセスしたら、あとは「SVG with JS」のCDNを使った方法と同じです。

自分で用意した Font Awesome のファイルを読み込む方法

fontawesome-free-5.0.9.zip をダウンロードして解凍するところまでは、「SVG with JS」の方法と同じになります。

必要なフォルダは、以下の web-fonts-with-css フォルダのみです。

fontawesome-free-5.0.9 –> web-fonts-with-css

※ web-fonts-with-cssフォルダ内の less、scssフォルダは必要ありませんので削除して構いません。

分かり易くするためにこの web-fonts-with-cssフォルダという名前を、fontawesome5 に変更してサーバーにアップロードします。

Font Awesome を利用するWebページのHTMLでは、<head>タグ内に以下のように <link>タグを記述します。ここで、cssフォルダ内にある fontawesome-all.min.css を読み込ませます。

<head>
  <!--core first + styles last-->
  <link href="path/to/fontawesome5/css/fontawesome-all.min.css" rel="stylesheet">
</head>

以上です。

「SVG with JS」の場合は、JavaScriptのファイルだけあればよいのですが、「Web Fonts with CSS」の場合は、WebフォントのファイルとCSSファイルの両方が必要な分、少しだけ作業が面倒になります。

7. アイコンの探し方と使い方

アイコンの探し方

アイコンは、こちら → Icons | Font Awesome のページで探します。

こんなページです。

このページについての説明を表にしました。

番号	説明
	ここにキーワードを入力して、アイコンを検索することができます。
	「Free版」のアイコンか、「Pro版(有料)」のアイコンかを指定することができます。
	アイコンのスタイルを指定することができます。スタイルには、「Solid(塗りつぶし)」「Regular(通常)」「Light(細い)」「Brands(ブランドのアイコン)」があります。
	カテゴリーを指定することができます。
	検索結果のアイコンが表示されます。

メモ

の右側に、「」というアイコンとともに「by algolia」と書かれています。どうやら、この検索処理には、「Algolia」という検索用サービスが利用されているようです。

アイコンの使い方

の中から使いたいアイコンをクリックすると、そのアイコンページに移動します。

このページの主な項目について表にしました。

番号	説明
	スタイルを選択します。
	HTMLとして使用するタグです。この部分の右端にあるクリップボードにコピーアイコンをクリックすると、クリップボードにこのタグがコピーされます。
	このアイコンを表す Unicode番号です。この部分の右端にあるクリップボードにコピーアイコンをクリックすると、クリップボードにこの番号がコピーされます。

通常は、

でスタイルを指定する。
で HTMLタグをコピーする。
目的の HTMLファイルの中の目的に位置にペーストする

という使い方になります。

上記の場合であれば、

<i class="fas fa-file"></i>

という部分が HTMLタグです。

8. おわりに

Font Awesome のバージョンが 5になって「SVG with JS」というフレームワークが新たに導入され、全体的に分かりにくくなったように感じる人が多いのではないかと思います。しかし、マニュアルを読んでみると「使い方」自体はそれ程難しくはありませんでした。本ページが参考になると嬉しいです。