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

希望这能有所帮助

在Angular项目中使用Font-Awesome有三个部分

安装 样式(CSS / SCSS) Angular中的用法

安装

从NPM安装并保存到package.json

npm install --save font-awesome

样式 如果使用CSS

插入到style.css中

@import '~font-awesome/css/font-awesome.css';

样式 如果使用SCSS

插入到style.scss中

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

在普通Angular 2.4+ 4+中使用

<i class="fa fa-area-chart"></i>

使用Angular材质

在你的app.module.ts中修改构造函数以使用MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

并将MatIconModule添加到@NgModule导入中

@NgModule({
  imports: [
    MatIconModule,
      ....
  ],
  declarations: ....
}

现在在任何模板文件中都可以这样做

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>

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

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

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

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

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

通过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是行不通的(也许反之亦然)。原因如下