如何将真棒字体添加到Angular 2 + CLI项目 [英] How to add font-awesome to Angular 2 + CLI project

问题描述

我正在使用Angular 2+和Angular CLI.

I'm using Angular 2+ and Angular CLI.

如何在我的项目中添加超棒的字体?

How do I add font-awesome to my project?

推荐答案

在Angular 2.0最终版本发布后， Angular2 CLI项目的结构已更改 –您不需要任何供应商文件，没有system.js，只有webpack.因此，您这样做:

After Angular 2.0 final release, the structure of the Angular2 CLI project has been changed — you don't need any vendor files, no system.js — only webpack. So you do:

1. npm install font-awesome --save

在angular-cli.json文件中找到styles[]数组，并在此处添加字体真棒的引用目录，如下所示:

In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below:

"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".

In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css".

在您想要的任何html文件中放置一些超棒的字体图标:

Place some font-awesome icons in any html file you want:

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

停止应用程序 Ctrl + c ，然后使用ng serve重新运行该应用程序，因为观察者仅用于src文件夹和angular-cli.找不到json的更改.

Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes.

这篇关于如何将真棒字体添加到Angular 2 + CLI项目的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！