Angular に Font Awesome を導入してモダンなアイコンを入れる

概要

ボタンとか画面で使用するアイコンを入れたい。。。と思った時に Font Awesome というパッケージを入れる時の備忘録。

前提条件

• Angular のバージョン： 7.0.1
• 導入する Font Awesome のバージョン： 5.6.3

手順

インストール

npm i -D @fortawesome/fontawesome-free

angular.json に追記

{
...
      "architect": {
        "build": {
          "builder": "@angular-devkit/build-angular:browser",
          "options": {
...
            "styles": [
              "client/styles.scss",
              // 追加
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
            ],
            "scripts": [
              // 追加
              "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
            ]
          },

...

        "test": {
          "builder": "@angular-devkit/build-angular:karma",
          "options": {
...
            "styles": [
              "client/styles.scss",
              // 追加
              "node_modules/@fortawesome/fontawesome-free/css/all.min.css"
            ],
            "scripts": [
              // 追加
              "node_modules/@fortawesome/fontawesome-free/js/all.min.js"
            ],
...
        },

...

}

上記は、Angular7 の場合の記載。
Angular6 以前の場合は、"../node_modules/bootstrap/dist/css/bootstrap.min.css" のように ../ が先頭に付く。（変更箇所は一緒）

使い方

こんな感じでアイコンは使用する。試しに Angular ロゴのフォントを使用。

<i class="fab fa-angular"></i>

画面で見てみると、出た。

以上で導入完了。
あとは公式の「アイコン一覧」を見て好きなの使う。