以上工作说明很多，建议大家看一下。不过，有一点需要注意:

在安装后，使用<i class="fas fa-coffee"></i>在我的项目(新实践项目只有一个星期了)中没有工作，这里的示例图标也在过去一周内从Font Awesome复制到剪贴板。

这个<i class="fa fa-coffee"></i>是有效的。如果在你的项目上安装了Font Awesome后，它还不能工作，我建议检查图标上的类，删除's'，看看它是否工作。

在Angular 2.0最终版发布之后，Angular2 CLI项目的结构已经改变了——你不需要任何供应商文件，不需要system.js——只需要webpack。所以你会:

npm install font-awesome --save 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!? ], ... } ] ], 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". 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> 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. Enjoy your awesome icons!

如果你使用的是SASS，你可以通过npm安装它

npm install font-awesome --save

然后导入到你的/src/styles中。scss:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

提示:只要有可能，避免混淆angular-cli的基础设施。；）

2020年2月更新: Fortawesome包现在支持ng add，但仅适用于angular 9及以上版本:

ng add @fortawesome/angular-fontawesome

2019年10月8日更新:

你可以使用一个新的包https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

在src/app/app.module.ts中导入FontAwesomeModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

将图标绑定到组件src/app/app.component.ts中的属性:

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

使用模板src/app/app.component.html中的图标:

<fa-icon [icon]="faCoffee"></fa-icon>

最初的回答:

选项1:

你可以使用angular-font-awesome npm模块

npm install --save font-awesome angular-font-awesome

导入模块:

...
//
import { AngularFontAwesomeModule } from 'angular-font-awesome';
@NgModule({
  //...
  imports: [
    //...
    AngularFontAwesomeModule
  ],
  //...
})
export class AppModule { }

如果你使用的是Angular CLI，那就在Angular - CLI .json的styles中添加这个漂亮的CSS

"styles": [
    "styles.css",
    "../node_modules/font-awesome/css/font-awesome.css"
],

注意:如果使用SCSS预处理器，只需更改SCSS的css

使用示例:

<fa name="cog" animation="spin"></fa>

选项2:

现在有一个官方的说法

安装font-awesome库并将依赖项添加到package.json

NPM install——save font-awesome

使用CSS

添加CSS图标到你的应用程序…

// in .angular-cli.json

"styles": [
  "styles.css",
  "../node_modules/font-awesome/css/font-awesome.css"
]

使用萨斯

创建一个空文件_variables。src/中的SCSS。

在_variables.scss中添加如下内容:

$fa-font-path: '../node_modules/font-awesome/fonts'; 在风格。SCSS添加以下内容:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';

Test

运行ng serve以开发模式运行应用程序，并导航到http://localhost:4200。

要验证Font Awesome已正确设置，将src/app/app.component.html更改为以下…

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

保存此文件后，返回浏览器，在应用程序标题旁边看到字体Awesome图标。

还有一个相关的问题，Angular CLI将font-awesome字体文件输出到dist根目录，因为默认情况下，Angular CLI将字体输出到dist根目录，顺便说一下，这根本不是问题。

如果你想使用免费版本的字体awesome - bootstrap，使用这个:

npm install --save @fortawesome/fontawesome-free

如果你正在构建angular项目，你还需要在你的angular中添加这些导入。json:

"styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/@fortawesome/fontawesome-free/js/all.js"
        ]

现在有几种方法可以在Angular CLI上安装fontAwesome:

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

npm install @fortawesome/fontawesome-svg-core
npm install @fortawesome/free-solid-svg-icons
npm install @fortawesome/angular-fontawesome

参考资料:https://github.com/FortAwesome/angular-fontawesome