Angular 2 + CLI プロジェクトに font-awesome を追加する方法質問する

Question

Angular 2.0 の最終リリース後、Angular2 CLI プロジェクトの構造が変更されました。ベンダーファイルや system.js は必要なく、webpack のみが必要になりました。そのため、次の操作を実行します。

npm install font-awesome --save

ファイル内で配列angular-cli.jsonを見つけてstyles[]、以下のようにここに font-awesome 参照ディレクトリを追加します。

"apps": [
    {
      "root": "src",
      "outDir": "dist",
      ....
      "styles": [
          "styles.css",
          "../node_modules/bootstrap/dist/css/bootstrap.css",
          "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!?
      ],
      ...
  }
  ]
],

Angular の最近のバージョンでは、angular.jsonを除いたファイルを代わりに使用します../。たとえば、を使用します"node_modules/font-awesome/css/font-awesome.css"。

任意の HTML ファイルに font-awesome アイコンをいくつか配置します。

<i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

ウォッチャーは src フォルダーのみを対象としており、angular-cli.json の変更は監視されないため、アプリケーションを停止してからCtrl、cを使用してアプリを再実行します。ng serve

素晴らしいアイコンをお楽しみください!

Answer 1