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

使用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 2.0最终版发布之后，Angular2 CLI项目的结构已经改变了——你不需要任何供应商文件，不需要system.js——只需要webpack。所以你会:

npm install font-awesome --save In the angular-cli.json file locate the styles[] array and add font-awesome references directory here, like below: "apps": [ { "root": "src", "outDir": "dist", .... "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/font-awesome.css" // -here webpack will automatically build a link css element out of this!? ], ... } ] ], In more recent versions of Angular, use the angular.json file instead, without the ../. For example, use "node_modules/font-awesome/css/font-awesome.css". Place some font-awesome icons in any html file you want: <i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i> Stop the application Ctrl + c then re-run the app using ng serve because the watchers are only for the src folder and angular-cli.json is not observed for changes. Enjoy your awesome icons!

使用Angular2 RC5和angular-cli 1.0.0-beta.11-webpack。你可以通过CSS导入来实现这一点。

只需安装字体awesome:

npm install font-awesome --save

然后在你配置的样式文件中导入font-awesome:

@import '../node_modules/font-awesome/css/font-awesome.css';

(样式文件在angular-cli.json中配置)

我浪费了几个小时，试图使用AngularCLI 6.0.3和Material Design来获得最新版本的fontaweesome 5.2.0。我遵循了FontAwesome网站上的npm安装说明

他们最新的文档指导你使用以下方法进行安装:

npm install @fortawesome/fontawesome-free

在浪费了几个小时后，我终于卸载了它，并使用以下命令安装字体awesome(这安装FontAwesome v4.7.0):

npm install font-awesome --save

现在它可以很好地使用:

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

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

公认的答案已经过时了。

棱角分明，棱角分明

安装FontAwesome NPM install @fortawesome/ fontawessome -free——保存 在angular上注册它。样式下的Json “node_modules / @fortawesome / fontawesome-free / css / all.min.css” 在您的应用程序中使用它