5. For fontawesome;X +最简单的方法是，

使用NPM包安装: NPM install——save @ fortawessome / fontawessome -free

以你的风格。SCSS文件包括:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

注意:如果你有_variables。那么在SCSS文件中包含$fa-font-path更合适，而不是在样式中。scss文件。

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

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

在Angular 11中

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

然后在app。module。ts的imports array中

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

  imports: [
    BrowserModule,
    FontAwesomeModule
  ],

然后在any.component.ts中

turningGearIcon = faCogs;

然后是any.component。html

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

经过一些实验，我设法得到以下工作:

使用npm安装: NPM install font-awesome——保存 添加到angular-cli-build.js文件: vendorNpmFiles: [ font-awesome / * * / *。+ (css | css.map |传递|测试结束svg | | ttf woff | | woff2)”, ］ 添加到index.html <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">

关键是在angular-cli-build.js文件中包含字体文件类型

.+（css|css.map|otf|eot|svg|ttf|woff|woff2）

从https://github.com/AngularClass/angular-starter开始，在测试了许多不同的配置组合之后，下面是我如何让它与AoT一起工作的。

我已经说过很多次了，在我的app.component.scss中:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome";

然后在webpack.config.js中(实际上是启动包中的webpack.comm .js):

在插件部分:

new CopyWebpackPlugin([
    { from: 'src/assets', to: 'assets' },
    { from: 'src/meta'},
    { from: 'node_modules/font-awesome/fonts', to: 'assets/fonts/' }
]),

在规则部分:

,
{
    test: /\.(eot|woff2?|svg|ttf)([\?]?.*)$/,
    use: 'file-loader?name=/assets/fonts/[name].[ext]'
}

如果你使用的是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的基础设施。；）