Angular で font-awesome を利用する

Angularでfont-awesomeを使用した時のメモです。

font-awesomeを導入することで、Angular内で様々なアイコンを使用する事ができます。

動作環境

angular-cli: 1.5.5

Angular: 5.0.5

Node: 9.8.0

font-awesome: 4.7.0

font-awesomeの導入手順

Angularでプロジェクトをすでに作成しているものとして進めます。

1. npmを使ってパッケージをインストールする

以下のコマンドでパッケージをインストールします。

npm install -save font-awesome

2. Angularの設定を変更する

angular-cli.jsonファイル編集し、cssと画像ファイルのパスを設定します。

①assets内に以下のコードを追加します。

"../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"

②styles内に以下のコードを追加します。

"../node_modules/font-awesome/css/font-awesome.css"

最終的にこんな感じになります。

{
  "$schema": "・・・",
  "project": {
    "name": "・・・"
  },
  "apps": [
    {
      "root": "・・・",
      "outDir": "・・・",
      "assets": [
        // ↓この行を追加
        "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)",
        "assets",
        "favicon.ico"
      ],
      "index": "・・・",
      "main": "・・・",
      "polyfills": "・・・",
      "test": "・・・",
      "tsconfig": "・・・",
      "testTsconfig": "・・・",
      "prefix": "・・・",
      "styles": [
        // ↓この行を追加
        "../node_modules/font-awesome/css/font-awesome.css",
        "styles.css"
      ],
      "scripts": [
          "・・・"
      ],
      "environmentSource": "・・・",
      "environments": {
        "dev": "・・・",
        "prod": "・・・"
      }
    }
  ]
}

3. 動作確認

①htmlのテンプレート(初期の状態だとapp.component.html)などに以下のコードを記述します。

<i class="fa fa-times" aria-hidden="true"></i>

②以下のコマンドを実行し、ローカルホストにサーバを立ち上げます

ng serve

③ブラウザでlocalhost:4200にアクセスし、×アイコンが表示されているか確認します。

font-awesomeで使用できるアイコンを探す

今回利用するのは『font-awesome 4.7.0』になるため、専用のページで検索する必要があります。

公式ページの検索バーからアイコンを検索しましょう。

英語のみの検索なので、『ユーザー』のアイコンが知りたければ、『user』で検索するようにしましょう。

font-awesome1

検索結果のアイコンを押すと、アイコンやクラス名、コードを確認することができます。

font-awesome2

以上となります。問題があればチャットボットやコメントでご連絡ください。

この記事は『angular-cliでfont-awesomeを使う方法』を参考させて頂きました。