我想使用字体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";

你可以使用Angular Font Awesome包

NPM install——save angle -font-awesome

然后在你的模块中导入:

import { AngularFontAwesomeModule } from 'angular-font-awesome';
     @NgModule({
       //...
      imports: [
        //...
        AngularFontAwesomeModule
      ],
      //...
    })
    export class AppModule { }

并导入angular-cli文件中的样式:

   "styles": [
        "styles.css",
        "../node_modules/font-awesome/css/font-awesome.css"
    ],

在NPM库中查看更多关于包的详细信息:

https://www.npmjs.com/package/angular-font-awesome

然后像这样使用它:

<i class=“fa fa-coffee”></i>

如果你使用的是SASS，你可以通过npm安装它

npm install font-awesome --save

然后导入到你的/src/styles中。scss:

$fa-font-path: "../node_modules/font-awesome/fonts";
@import "../node_modules/font-awesome/scss/font-awesome.scss";

提示:只要有可能，避免混淆angular-cli的基础设施。；）

公认的答案已经过时了。

棱角分明，棱角分明

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

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';

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

使用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）