441
464

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

1年後に差がつくFont Awesome5 ~フロントエンド開発(ES6,Webpack4,Babel7)への導入~

Last updated at Posted at 2019-01-15

概要

Font Awesome(フォントオーサム)はFreeで使えるアイコン集で、このジャンルでほぼデファクトといって良い存在になっています。Free版とPro版がありますがFree版でも約1500種類のアイコンが使えます。

image.png
本稿では、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にバンドルする方式では使ったことがない人
  • npmwebpackは使ったことがある人

対象環境

  • npmWebpack4ES6Babel7
  • 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を参照して表示する方法から。

以下のようにするだけで、犬とコメントと猫のアイコンが表示される。

index.html
<!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>

表示結果

image.png

ある意味一番簡単な方法で、

 <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>タグclassfas fa-dog fa-3x とクラスを指定するだけで美しいフォントが表示されます。

「おーさむ!」となる。

SolidスタイルとRegularスタイル→Font Awesomeのフォントスタイル

ここをみるとFont Awesomeには大量のアイコンがあることがわかるが、フォントのスタイルは4種類に分類される。

  • Solidスタイル・・・中が塗りつぶされているアイコンimage.png
    Solidスタイルにはfasというクラスを指定する
Solidスタイルの例
<i class="fas fa-arrow-circle-up"></i>
  • Regularスタイル・・・線画で表現されたアイコンimage.png
    Regularスタイルにはfarというクラスを指定する
Regularスタイルの例
<i class="far fa-arrow-circle-up"></i>
  • Brandsスタイル・・・ブランドのアイコン image.png
    Brandsスタイルにはfabというクラスを指定する
Brandsスタイルの例
<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は以下のようになる

package.json(抜粋)
  "dependencies": {
    "@fortawesome/fontawesome-free": "^5.6.3"
  }

コーディング

インストールされた @fortawesome/fontawesome-freeパッケージから必要なモジュールインポートする
SolidタイプとRegularタイプを使いたいので以下のようにする。HTML内に<i>タグで記述したブラウザに表示したいだけなので、コードはこのimport文だけでOK。

index.js
import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';
import '@fortawesome/fontawesome-free/js/regular';

htmlは以下のようにする。<i>タグを使って記述する部分は、CDNからCSSを参照する場合とおなじ。
違いはCSSファイルをインポートするかわりに**

441
464
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
441
464

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?