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

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

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

编辑:我使用角^4.0.0和电子^1.4.3

如果你在使用ElectronJS或类似的程序时遇到了问题，并且出现了404错误，一个可能的解决方法是重新编辑你的webpack.config.js，通过添加(并且假设你已经通过npm或包中安装了字体很棒的节点模块)。json文件):

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

注意，我使用的webpack配置有src/app/dist作为输出，并且，在dist中，webpack创建了一个资产文件夹:

// our angular app
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app',
},

// Config for our build files
output: {
    path: helpers.root('src/app/dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
},

所以基本上，目前的情况是:

Webpack正在将字体文件夹复制到开发资产文件夹。 Webpack正在将dev assets文件夹复制到dist assets文件夹

现在，当构建过程完成时，应用程序将需要查找.scss文件和包含图标的文件夹，正确地解析它们。 为了解决这些问题，我在我的webpack配置中使用了这个:

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

最后，在.scss文件中，我导入了字体很棒的.scss，并定义了字体的路径，同样是dist/assets/font-awesome/fonts。路径是dist，因为在我的webpack中。配置输出。路径设置为helpers.root('src/app/dist');

在app。scss中

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

注意，通过这种方式，它将定义字体路径(稍后在.scss文件中使用)，并使用~font-awesome导入.scss文件来解析node_modules中的字体-awesome路径。

这是相当棘手的，但这是唯一的方法，我发现绕过404错误问题与电子。js

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

对于Angular 6，

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

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

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

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

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

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

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

现在有几种方法可以在Angular CLI上安装fontAwesome:

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

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

参考资料:https://github.com/FortAwesome/angular-fontawesome