webpack2使用:

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "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>

这篇文章描述了如何将Fontawesome 5集成到Angular 6中(Angular 5和以前的版本也可以工作，但你必须调整我的文章)

选项1:添加css-Files

利:每个图标都将包括在内

Contra:每个图标将包括(更大的应用程序大小，因为所有字体都包括在内)

添加以下包:

npm install @fortawesome/fontawesome-free-webfonts

然后在angular.json中添加以下代码行:

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

选项2:Angular包

优点:应用程序更小

反:你必须单独包含你想要使用的每个图标

使用FontAwesome 5 Angular包:

npm install @fortawesome/angular-fontawesome

只需按照他们的文档添加图标。他们使用svgs -icons，所以你只需要添加svgs / icons就可以了。

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

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

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

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

使用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）

对于Angular 6，

第一个npm安装font-awesome——保存

将node_modules/font-awesome/css/font-awesome.css添加到angular.json中。

记住不要在node_modules/前面添加任何点。