angular-cliでfont-awesomeを使う方法

angular-cliでfont-awesomeを使ったときのメモ

事前準備

angular-cliでプロジェクトを作成する。(angular-cliのインストールとかは省略)

$ ng new fontawesome-example --skip-git
$ cd fontawesome-example


font-awesomeのインストール

$ npm install -save font-awesome

angular-cli.jsonの編集

angular-cli.json

{
  ...
  "apps": [
    {
      ...
      "styles": [
+       "../node_modules/font-awesome/css/font-awesome.css",
        "styles.css"
      ],
      ...
    }
  ],
  "addons": [
+   "../node_modules/font-awesome/fonts/*.+(otf|eot|svg|ttf|woff|woff2)"
  ],
  ...
}

使ってみる

src/app/app.component.html

<h1>
+ <i class="fa fa-user" aria-hidden="true"></i>
  {{title}}
</h1>

起動

$ ng serve

localhost:4200にアクセスしてみる。

以上！