概要
Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。
本稿では、node.js環境での開発を前提としたWebフロントエンド開発で Font Awesome5 を使う時のポイントを説明します。Font Awesomeはv5になってフロントエンド開発との連携機能が大幅強化され、お手軽にJavaScriptのバンドルにフォントを埋め込むことができます。
Font Awesomeのアイコンを使う（バンドルする）には以下の3ステップを踏みます。
- Font Awesome を npm でインストールして、
- JavaScriptのコードで必要なアイコンだけを import して
- Font Awesomeの必要最小限が含まれるように webpack でバンドルする
最終的には、1つのbundle.jsの中に、そのアプリで使いたいアイコンだけが取り込まれた状態にします。
つまり、アイコンデータもすべてbundle.jsに入るので、HTML上でCSSを指定する必要も無いし、また必要なアイコンだけ取り込むのでbundle.jsのサイズも最小限にできます
ハマりポイント（例：minimizer(uglify-js)によっては Font Awesome含むビルドが重い！エラい時間がかかる！）もあるので、そこも扱います。
想定読者
- Font Awesomeを使ったことがない、または、JSにバンドルする方式では使ったことがない人
- npmやwebpackは使ったことがある人
対象環境
- npm、Webpack4、ES6、Babel7
- Font Awesomeは Font Awesome v 5.＊ のFree版を対象にします
- 特定のフレームワーク(Vue/React/Angular等)に特化した内容は扱いませんが知識は応用可能です
ソースコード
記事で使用した全ソースコードはこちらにあります
https://github.com/riversun/font-awesome5-js-example
(1)CDNを使って表示する
どんなアイコンがあるかは https://fontawesome.com/icons?d=gallery&m=free からさがせる。
まずは、インストール不要でHTMLで直接CDNを参照して表示する方法から。
以下のようにするだけで、犬とコメントと猫のアイコンが表示される。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
<i class="fas fa-dog fa-3x"></i>
<i class="far fa-comments fa-3x"></i>
<i class="fas fa-cat fa-3x fa-flip-horizontal"></i>
</body>
</html>
表示結果
ある意味一番簡単な方法で、
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css"
integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
Font AwesomeのCSSを直接CDNから読み込み、
<i class="fas fa-dog fa-3x"></i>
のように<i>タグのclassに fas fa-dog fa-3x とクラスを指定するだけで美しいフォントが表示されます。
「おーさむ！」となる。
SolidスタイルとRegularスタイル→Font Awesomeのフォントスタイル
ここをみるとFont Awesomeには大量のアイコンがあることがわかるが、フォントのスタイルは4種類に分類される。
-
Solidスタイル・・・中が塗りつぶされているアイコン
Solidスタイルにはfasというクラスを指定する
<i class="fas fa-arrow-circle-up"></i>
-
Regularスタイル・・・線画で表現されたアイコン
Regularスタイルにはfarというクラスを指定する
<i class="far fa-arrow-circle-up"></i>
-
Brandsスタイル・・・ブランドのアイコン
Brandsスタイルにはfabというクラスを指定する
<i class="fab fa-apple"></i>
Lightスタイル・・・細い線で表現されたアイコン。PRO版のみ。
このようにHTMLにCSSを記載して、<i>タグで指定する方法が一番簡単だしとっつきやすい。
次章以降は、本稿の目的である、JSにバンドルしてFont Awesomeを使う方法を見る。
(2)ライブラリ版をつかって表示する
ここからが本編、Font Awesomeをインストールしていく。
まずJavaScriptで使えるFont Awesomeのパッケージだが、大きく2種類ある
便宜的に**基本パッケージ版(Basic packages)とSVGコア版(fontawesome-svg-core)**という呼び方をするが、前者は手軽かつすぐに使えることを目的とした全部入りのパッケージ、後者はたとえば使いたいアイコンだけを選んだり、挙動を詳細に制御したりできるのが特徴。どちらもJSにバンドルすることができるので、Font Awesomeのアイコンがバンドルされた app.js を作成することができる。
2つのパッケージの目的
| 名称 | npmパッケージ名 | 目的 | |
| 基本パッケージ版 | Font Awesome (JavaScript) |
@fortawesome/fontawesome-free (※1) |
すぐに使えること |
| SVGコア版 | Font Awesome SVG Core (JavaScript) |
@fontawesome-svg-core (※2) |
APIで詳細に制御できること |
※1 有償版の@fortawesome/fontawesome-proもある
※2 スタイルごとのパッケージもある（後半で説明する)
公式の解説はこちら
(2)-1基本パッケージ版 Font Awesome (JavaScript) のインストールと実行
まず、基本パッケージ版からみていく。
インストール
@fortawesome/fontawesome-freeパッケージをnpm installする
npm install @fortawesome/fontawesome-free --save
package.jsonは以下のようになる
"dependencies": {
"@fortawesome/fontawesome-free": "^5.6.3"
}
コーディング
インストールされた @fortawesome/fontawesome-freeパッケージから必要なモジュールインポートする
SolidタイプとRegularタイプを使いたいので以下のようにする。HTML内に<i>タグで記述したブラウザに表示したいだけなので、コードはこのimport文だけでOK。
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';
htmlは以下のようにする。<i>タグを使って記述する部分は、CDNからCSSを参照する場合とおなじ。
違いはCSSファイルをインポートするかわりに**