要在你的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">

好运！

将它添加到您的包中。json作为 “devDependencies” Font-awesome: "版本号"

进入命令提示符，输入您配置的npm命令。

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

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

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

使用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设置，你可能不需要它，或者你可能需要其他东西。

现在有几种方法可以在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