使用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中配置)

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

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

我想使用字体Awesome 5+和大多数答案集中在旧版本

对于新的Font Awesome 5+， angular项目还没有发布，所以如果你想使用Font Awesome网站atm上提到的例子，你需要使用一个变通方法。(尤其是fas, far类而不是fa类)

我刚刚在我的styles.css中导入了cdn到Font Awesome 5。只是添加了这个，以防它能帮助别人比我更快地找到答案:-)

样式代码。css

@import "https://use.fontawesome.com/releases/v5.0.7/css/all.css";

如果你想使用免费版本的字体awesome - bootstrap，使用这个:

npm install --save @fortawesome/fontawesome-free

如果你正在构建angular项目，你还需要在你的angular中添加这些导入。json:

"styles": [
          "src/styles.css",
          "node_modules/bootstrap/dist/css/bootstrap.min.css",
          "node_modules/@fortawesome/fontawesome-free/css/fontawesome.min.css"
        ],
        "scripts": [
          "node_modules/jquery/dist/jquery.min.js",
          "node_modules/bootstrap/dist/js/bootstrap.min.js",
          "node_modules/popper.js/dist/umd/popper.min.js",
          "node_modules/@fortawesome/fontawesome-free/js/all.js"
        ]

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文件。

Font Awesome为您提供了可伸缩的矢量图标，可以立即自定义大小，颜色，投影，以及任何可以用CSS的力量完成的事情。

创建一个新项目并导航到该项目。

ng new navaApp
cd navaApp

安装font-awesome库并将依赖项添加到package.json。

npm install --save font-awesome

使用CSS

添加CSS图标到你的应用程序…

// in angular.json
"build": {
"options": {
"styles": [
  "../node_modules/font-awesome/css/font-awesome.css",
  "src/styles.css"
],
 }
}

使用萨斯

使用SASS创建新项目:

ng new cli-app --style=scss

使用现有的项目与CSS:

将src/styles.css重命名为src/styles.scss 改变角度。Json来查找样式。用SCSS代替css:

// in angular.json
"build": {
"options": {
"styles": [
  "src/styles.scss"
],
}
}

确保将styles.css更改为styles.scss。

创建一个空文件_variables。src/中的SCSS。

在_variables.scss中添加如下内容:

$fa-font-path : '../node_modules/font-awesome/fonts';

在风格。SCSS添加以下内容:

@import 'variables';
@import '../node_modules/font-awesome/scss/font-awesome';