如何将 font-awesome 添加到 Angular 2 + CLI 项目

在 Angular 2.0 最终版本之后，Angular2 CLI 项目的结构发生了变化——你不需要任何供应商文件，不需要 system.js——只有 webpack。所以你也是：

npm install font-awesome --save 在 angular-cli.json 文件中找到 styles[] 数组并在此处添加 font-awesome 引用目录，如下所示： "apps": [ { "root": "src", "outDir ": "dist", .... "styles": [ "styles.css", "../node_modules/bootstrap/dist/css/bootstrap.css", "../node_modules/font-awesome/css/ font-awesome.css" // - 这里 webpack 会自动构建一个链接 css 元素！？ ], ... } ] ], 在更新的 Angular 版本中，使用 angular.json 文件代替，不带 ../.例如，使用“node_modules/font-awesome/css/font-awesome.css”。在您想要的任何 html 文件中放置一些字体很棒的图标： 停止应用程序 Ctrl + c然后使用 ng serve 重新运行应用程序，因为观察者仅用于 src 文件夹，并且未观察到 angular-cli.json 的更改。享受你的真棒图标！

---

如果你使用的是 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 基础架构混淆。 ;)

---

最佳答案有点过时了，还有一种更简单的方法。

通过 npm 安装 npm install font-awesome --save 在你的 style.css 中：@import '~font-awesome/css/font-awesome.css';或者在你的 style.scss: $fa-font-path: "~font-awesome/fonts"; @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 导入到您的 styles.scss 中，它将无法工作（反之亦然）。 Here is why

---

在 Angular 项目中使用 Font-Awesome 有 3 个部分

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

安装

从 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 Material 一起使用

在您的 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>

---

2020 年 2 月更新：
fortawesome 软件包现在支持 ng add，但它在 only for 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

将 FontAwesomeModule 添加到 src/app/app.module.ts 中的导入：

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，请将 font-awesome CSS 添加到 angular-cli.json 中的样式中

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

注意：如果使用 SCSS 预处理器，只需将 css 更改为 scss

使用示例：

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

选项 2：

现在有一个 official story

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

npm install --save font-awesome

使用 CSS

要将 Font Awesome CSS 图标添加到您的应用程序...

// in .angular-cli.json

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

使用 SASS

在 src/ 中创建一个空文件 _variables.scss。

将以下内容添加到 _variables.scss：

$fa-font-path : '../node_modules/font-awesome/fonts'; 在 styles.scss 中添加以下内容：

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

测试

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

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

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

保存此文件后，返回浏览器以查看应用标题旁边的 Font Awesome 图标。

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

---

我想我会对此提出解决方案，因为 font-awesome 现在根据他们的文档以不同的方式安装。

npm install --save-dev @fortawesome/fontawesome-free

为什么它现在令人难以置信，但我想我会坚持使用最新版本，而不是退回到旧字体 - 真棒。

然后我将它导入我的 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";

希望这可以帮助

---

使用 Angular2 RC5 和 angular-cli 1.0.0-beta.11-webpack.8，您可以通过 css 导入来实现这一点。

只需安装字体真棒：

npm install font-awesome --save

然后在您配置的样式文件之一中导入 font-awesome：

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

（样式文件在 angular-cli.json 中配置）

---

接受的答案已过时。

对于 angular 9 和 Fontawesome 5

安装 FontAwesome npm install @fortawesome/fontawesome-free --save 在 angular.json 上以 "node_modules/@fortawesome/fontawesome-free/css/all.min.css" 样式注册它在你的应用程序上使用它

---

上面的许多说明都有效，我建议查看这些说明。但是，需要注意的一点：

安装后在我的项目（仅一周前的新练习项目）中使用 <i class="fas fa-coffee"></i>不起作用，并且此处的示例图标也在过去一周内从 Font Awesome 复制到剪贴板。

这<i class="fa fa-coffee"></i>确实有效。如果在您的项目上安装 Font Awesome 后它还没有工作，我建议检查图标上的类以删除“s”以查看它是否工作。

---

对于 fontawesome 5.x+，最简单的方法如下，

使用 npm 包安装：npm install --save @fortawesome/fontawesome-free

在您的 styles.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 而不是在 styles.scss 文件中包含更合适。

---

对于 Angular 6，

第一个npm install font-awesome --save

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

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

---

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

选项 1：添加 css 文件

优点：每个图标都将包括在内

相反：每个图标都将被包含（更大的应用程序大小，因为包含所有字体）

添加以下包：

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：角度包

优点：较小的应用程序大小

相反：您必须包含要单独使用的每个图标

使用 FontAwesome 5 Angular 包：

npm install @fortawesome/angular-fontawesome

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

---

这里有很多很好的答案。但是，如果您尝试了所有这些并且仍然得到正方形而不是字体很棒的图标，请检查您的 css 规则。就我而言，我有以下规则：

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

它覆盖了 fontawesome 字体。只需将 * 选择器替换为 body 即可解决我的问题：

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

---

经过一些实验，我设法使以下工作：

使用 npm 安装： npm install font-awesome --save 添加到 angular-cli-build.js 文件： vendorNpmFiles : [ font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf |woff|woff2)', ] 添加到 index.html

关键是在 angular-cli-build.js 文件中包含字体文件类型

.+(css|css.map|otf|eot|svg|ttf|woff|woff2)

---

编辑：我正在使用 angular ^4.0.0 和 Electron ^1.4.3

如果您遇到 ElectronJS 或类似问题并且出现某种 404 错误，则可能的解决方法是通过添加（并假设您已安装 font-awesome 节点模块）来编辑您的 webpack.config.js通过 npm 或在 package.json 文件中）：

new CopyWebpackPlugin([
     { from: 'node_modules/font-awesome/fonts', to: 'assets' },
     { from: 'src/assets', to: 'assets' }
]),

请注意，我使用的 webpack 配置将 src/app/dist 作为输出，并且在 dist 中，webpack 创建了一个 assets 文件夹：

// our angular app
entry: {
    'polyfills': './src/polyfills.ts',
    'vendor': './src/vendor.ts',
    'app': './src/app/app',
},

// Config for our build files
output: {
    path: helpers.root('src/app/dist'),
    filename: '[name].js',
    sourceMapFilename: '[name].map',
    chunkFilename: '[id].chunk.js'
},

所以基本上，目前正在发生的事情是：

Webpack 正在将字体文件夹复制到开发资产文件夹。

Webpack 正在将 dev assets 文件夹复制到 dist assets 文件夹

现在，当构建过程完成时，应用程序需要查找 .scss 文件和包含图标的文件夹，并正确解析它们。为了解决它们，我在我的 webpack 配置中使用了这个：

// support for fonts
{
    test: /\.(ttf|eot|svg|woff(2)?)(\?[a-z0-9=&.]+)?$/,
    loader: 'file-loader?name=dist/[name]-[hash].[ext]'
},

最后，在 .scss 文件中，我导入了 font-awesome .scss 并定义了字体的路径，也就是 dist/assets/font-awesome/fonts。路径是 dist 因为在我的 webpack.config 中 output.path 设置为 helpers.root('src/app/dist');

因此，在 app.scss 中：

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

请注意，通过这种方式，它将定义字体路径（稍后在 .scss 文件中使用）并使用 ~font-awesome 导入 .scss 文件以解析 node_modules 中的 font-awesome 路径。

这很棘手，但这是我发现解决 Electron.js 的 404 错误问题的唯一方法

---

从 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（实际上是 starter pack 中的 webpack.commong.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]'
}

---

我浪费了几个小时试图让最新版本的 FontAwesome 5.2.0 与 AngularCLI 6.0.3 和 Material Design 一起工作。我按照 FontAwesome 网站上的 npm 安装说明进行操作

他们最新的文档指示您使用以下内容进行安装：

npm install @fortawesome/fontawesome-free

浪费了几个小时后，我终于卸载了它并使用以下命令安装了 font awesome（这将安装 FontAwesome v4.7.0）：

npm install font-awesome --save

现在它可以正常使用：

$fa-font-path: "~font-awesome/fonts" !default;
@import "~font-awesome/scss/font-awesome.scss";
<mat-icon fontSet="fontawesome" fontIcon="fa-android"></mat-icon>

---

Font Awesome 为您提供scalable可立即自定义的矢量图标 - 大小、颜色、阴影以及任何可以通过 CSS 完成的功能。

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

ng new navaApp
cd navaApp

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

npm install --save font-awesome

使用 CSS

要将 Font Awesome CSS 图标添加到您的应用程序...

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

使用 SASS

使用 SASS 创建新项目：

ng new cli-app --style=scss

要通过 CSS 与现有项目一起使用：

将 src/styles.css 重命名为 src/styles.scss 更改 angular.json 以查找 styles.scss 而不是 css：

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

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

在 src/ 中创建一个空文件 _variables.scss。

将以下内容添加到 _variables.scss：

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

在 styles.scss 中添加以下内容：

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

---

您可以使用 Angular Font Awesome 包

npm install --save font-awesome angular-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>

---

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

祝你好运！

---

使用 LESS（不是 SCSS）和 Angular 2.4.0 和标准 Webpack（不是 Angular CLI，以下对我有用：

npm install --save font-awesome

和（在我的 app.component.less 中）：

@import "~font-awesome/less/font-awesome.less";

当然，您可能需要这个明显且高度直观的片段（在 webpack.conf 的 module.loaders 中）

        {
            test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
            loader: 'file?name=graphics/[name].[ext]'
        },

加载程序可以修复此类 webpack 错误

"Module parse failed: \node_modules\font-awesome\fonts\fontawesome-webfont.svg?v=4.7.0 Unexpected token (1:0)" 

并且正则表达式匹配那些 svg 引用（有或没有版本规范）。根据您的 webpack 设置，您可能不需要它，或者您可能需要其他东西。

---

将它添加到你的 package.json 作为“devDependencies” font-awesome : “version number”

转到您配置的命令提示符类型 npm 命令。

---

我想使用 Font Awesome 5+，大多数答案都集中在旧版本上

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

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

Style.css 中的代码

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

---

如果由于某种原因您无法安装包 throw npm。您可以随时编辑 index.html 并在头部添加字体很棒的 CSS。然后只是在项目中使用它。

---

对于 webpack2 使用：

{
 test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)(\?(v=)?(\d+)(\.\d+)*)?$/,
                    loader: "file-loader"
}

而不是 file-loader?name=/assets/fonts/[name].[ext]

---

对于使用 ng 的 Angular 9：

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

Look Here For More Information

---

现在有几种方法可以在 Angular CLI 上安装 fontAwesome：

ng add @fortawesome/angular-fontawesome

OR using yarn

yarn add @fortawesome/fontawesome-svg-core
yarn add @fortawesome/free-solid-svg-icons
yarn add @fortawesome/angular-fontawesome

OR Using NPM

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

此处参考：https://github.com/FortAwesome/angular-fontawesome

---

在 Angular 11 中

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

然后在 app.module.ts 处导入数组

import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

  imports: [
    BrowserModule,
    FontAwesomeModule
  ],

然后在 any.component.ts

turningGearIcon = faCogs;

然后any.component.html

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

---

如果您想使用免费版的 font 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"
        ]

---