Font Awesome 5の基本的な使い方と、Font Awesome 4との違い

Font Awesomeはバージョン5になってから2つの方法で利用できるようになっています。

• WebフォントとCSSで利用する方法
• SVGとJavaScriptで利用する方法

また、年額$99の有料版も用意されていたり、スタイルが追加されていたりするので、今までのバージョン4からはかなり変わっています。
今回はバージョン4から何が変わったのかイマイチ分かっていない人に向けて、Font Awesome ５の基本的な使い方をまとめておきます。

Font Awesome 4との違い

Font Awesome ４と違い、Font Awesome ５ではスタイルが下記の4つになりました。

• Font Awesome Solid
• Font Awesome Regular
• Font Awesome Light
• Font Awesome Brands

その影響で、Font Awesome ４ではclass名が.faだったのが、スタイルに応じて変える必要が出てきました。

<!-- バージョン4 -->
<i class="fa fa-〇〇"></i>

<!-- バージョン5 -->
<i class="fas fa-〇〇"></i>
<i class="far fa-〇〇"></i>
<i class="fal fa-〇〇"></i>

.faclassを使っても表示されないので注意が必要ですし、目的のアイコンのスタイルが何なのか確認する必要があります。

コーディング時は公式サイトのIconsページでコードをコピペするだけなので、そこまで影響がないのかもしれませんが、デザインツールで使うときにフォントが違うと表示されないことがあるので注意が必要です。

Font Awesome 5の使い方

Webフォントして利用する方法とSVGとして利用する方法の違い

Font Awesome 5では「Web Fonts with CSS」という方法と、「SVG with JavaScript」という方法の2種類があります。
できることの比較は下記の通りです（CSSを追加すればどちらでもひと通りのことはできますが、今回はあくまでもFont Awesome 5を入れただけの状態でできることの比較をしています）。

SVGだと疑似要素で使用する以外はひと通りのことができますし、アイコンの拡大や反転・移動・マスクなどのFont Awesome 5から追加された機能が使えます。

使い分けとしては、基本的にFont Awesome 5を使うときはSVG with JavaScriptを使って、今までのやり方に慣れていてそちらで利用したい場合や、JavaScriptを使用するのでその関係で何か不具合が発生する場合はWeb Fonts with CSSを使うという使い分けになりそうです。

Webフォントとして実装する方法

Webフォントとして実装する場合は、下記のタグを<head>タグ内に設置します（v5.6.3の部分は使用したいバージョンに変更する）。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">

あとは使用したいアイコンをFont AwesomeのIconsページで探して、詳細ページにあるタグを設置すれば、アイコンが表示されます。

<i class="fab fa-font-awesome-flag"></i>

SVGとJavaScriptで実装する方法

SVGとJavaScriptで実装する場合は、疑似要素にアイコンを表示できないので注意が必要です。

まずは、下記<script>をに設置します。

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

あとはWebフォントの場合と同様で、使用したいアイコンをFont AwesomeのIconsページで探して、詳細ページにあるタグを設置すれば、アイコンが表示されます。

1点注意しなければならないのが、<i>タグから<svg>タグを使ったインラインSVGに書き換えられる点です。

そのため、<i>タグに対してCSSを当てても適用されません。