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

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

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

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

我想我会抛出我的决议，因为字体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";

希望这能有所帮助

编辑:我使用角^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 5，将下面的代码插入到src/index.html文件中。

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

好运！

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

使用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/前面添加任何点。