如果由于某种原因你不能安装包抛出npm。你可以编辑index.html，并在头部添加字体和CSS。然后用在项目中。

这篇文章描述了如何将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就可以了。

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根目录，顺便说一下，这根本不是问题。

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

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

对于使用ng的Angular 9:

ng add @fortawesome/angular-fontawesome@0.6.x

更多信息请看这里