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

希望这能有所帮助

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

好运！

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

对于Angular 6，

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

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

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

5. For fontawesome;X +最简单的方法是，

使用NPM包安装: NPM install——save @ fortawessome / fontawessome -free

以你的风格。SCSS文件包括:

$fa-font-path: "~@fortawesome/fontawesome-free/webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/regular';

注意:如果你有_variables。那么在SCSS文件中包含$fa-font-path更合适，而不是在样式中。scss文件。

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