这篇文章描述了如何将Fontawesome 5集成到Angular 6中(Angular 5和以前的版本也可以工作，但你必须调整我的文章)

选项1:添加css-Files

利:每个图标都将包括在内

Contra:每个图标将包括(更大的应用程序大小，因为所有字体都包括在内)

添加以下包:

npm install @fortawesome/fontawesome-free-webfonts

然后在angular.json中添加以下代码行:

"app": {
....
"styles": [
....
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fontawesome.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-regular.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-brands.css",
"node_modules/@fortawesome/fontawesome-free-webfonts/css/fa-solid.css"
],
...    
}

选项2:Angular包

优点:应用程序更小

反:你必须单独包含你想要使用的每个图标

使用FontAwesome 5 Angular包:

npm install @fortawesome/angular-fontawesome

只需按照他们的文档添加图标。他们使用svgs -icons，所以你只需要添加svgs / icons就可以了。

这里有很多好的答案。但如果你尝试了所有这些，仍然得到方形而不是方正的图标，检查你的css规则。在我的例子中，我有以下规则:

* {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

它覆盖了一些字体。只是将* selector替换为body解决了我的问题:

body {
  font-family: Roboto-Light, Roboto, 'Helvetica Neue', sans-serif !important;
}

2020年2月更新: Fortawesome包现在支持ng add，但仅适用于angular 9及以上版本:

ng add @fortawesome/angular-fontawesome

2019年10月8日更新:

你可以使用一个新的包https://www.npmjs.com/package/@fortawesome/angular-fontawesome

npm install @fortawesome/angular-fontawesome @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons

在src/app/app.module.ts中导入FontAwesomeModule:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
 
import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 
@NgModule({
  imports: [
    BrowserModule,
    FontAwesomeModule
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

将图标绑定到组件src/app/app.component.ts中的属性:

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  faCoffee = faCoffee;
}

使用模板src/app/app.component.html中的图标:

<fa-icon [icon]="faCoffee"></fa-icon>

最初的回答:

选项1:

你可以使用angular-font-awesome npm模块

npm install --save font-awesome angular-font-awesome

导入模块:

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

如果你使用的是Angular CLI，那就在Angular - CLI .json的styles中添加这个漂亮的CSS

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

注意:如果使用SCSS预处理器，只需更改SCSS的css

使用示例:

<fa name="cog" animation="spin"></fa>

选项2:

现在有一个官方的说法

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

NPM install——save font-awesome

使用CSS

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

// in .angular-cli.json

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

使用萨斯

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

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

$fa-font-path: '../node_modules/font-awesome/fonts'; 在风格。SCSS添加以下内容:

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

Test

运行ng serve以开发模式运行应用程序，并导航到http://localhost:4200。

要验证Font Awesome已正确设置，将src/app/app.component.html更改为以下…

<h1>
  {{title}} <i class="fa fa-check"></i>
</h1>

保存此文件后，返回浏览器，在应用程序标题旁边看到字体Awesome图标。

还有一个相关的问题，Angular CLI将font-awesome字体文件输出到dist根目录，因为默认情况下，Angular CLI将字体输出到dist根目录，顺便说一下，这根本不是问题。

我想我会抛出我的决议，因为字体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有三个部分

安装 样式(CSS / SCSS) Angular中的用法

安装

从NPM安装并保存到package.json

npm install --save font-awesome

样式 如果使用CSS

插入到style.css中

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

样式 如果使用SCSS

插入到style.scss中

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

在普通Angular 2.4+ 4+中使用

<i class="fa fa-area-chart"></i>

使用Angular材质

在你的app.module.ts中修改构造函数以使用MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

并将MatIconModule添加到@NgModule导入中

@NgModule({
  imports: [
    MatIconModule,
      ....
  ],
  declarations: ....
}

---

现在在任何模板文件中都可以这样做

<mat-icon fontSet="fontawesome" fontIcon="fa-area-chart"></mat-icon>

如果你想使用免费版本的字体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"
        ]