从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]'
}

从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]'
}

在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>

使用LESS(不是SCSS)、Angular 2.4.0和标准Webpack(不是Angular CLI)，下面的方法对我来说是有效的:

npm install --save font-awesome

And(在my app.component.less中):

@import "~font-awesome/less/font-awesome.less";

当然，您可能需要这个明显且高度直观的代码片段(在模块中)。webpack.conf中的加载器

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

加载器是用来修复webpack错误的

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)" 

regexp匹配那些svg引用(有或没有版本规范)。取决于你的webpack设置，你可能不需要它，或者你可能需要其他东西。

对于使用ng的Angular 9:

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

更多信息请看这里

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

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

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