如果你想使用免费版本的字体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"
        ]

我想我会抛出我的决议，因为字体awesome现在安装不同，根据他们的文档。

npm install --save-dev @fortawesome/fontawesome-free

为什么它是fortawesome现在我不知道了，但我想我会坚持使用最新的版本，而不是回到旧的字体-真棒。

然后我把它导入我的scss

$fa-font-path: "../node_modules/@fortawesome/fontawesome-free/webfonts";
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/v4-shims";

希望这能有所帮助

上面的答案有点过时了，有一种稍微简单的方法。

通过NPM安装 NPM install font-awesome——保存 在你的style.css中: @ import“~ font-awesome / css / font-awesome.css”; 或者用你的风格。 $ fa-font-path:“~ font-awesome /字体”; @ import ' ~ font-awesome / scss / font-awesome '; 编辑:如注释中所述，字体行必须在新版本上更改为$fa-font-path: "../../../node_modules/font-awesome/fonts";

使用~将使sass查找node_module。这样做比相对路径更好。原因是，如果你在npm上上传了一个组件，然后在组件scss中导入了font-awesome，那么它将使用~正常工作，而不是使用相对路径，因为相对路径在那一点上是错误的。

此方法适用于任何包含css的npm模块。它也适用于scss。然而，如果你导入css到你的样式。SCSS是行不通的(也许反之亦然)。原因如下

这里有很多好的答案。但如果你尝试了所有这些，仍然得到方形而不是方正的图标，检查你的css规则。在我的例子中，我有以下规则:

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

它覆盖了一些字体。只是将* selector替换为body解决了我的问题:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

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根目录，顺便说一下，这根本不是问题。

对于使用ng的Angular 9:

ng add @fortawesome/angular-fontawesome@0.6.x

更多信息请看这里