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

Question

我正在使用 Angular 2+ 和 Angular CLI。

如何将 font-awesome 添加到我的项目中？

Answer 1

经过一些实验后，我设法实现了以下效果：

使用 npm 安装：
```
npm install font-awesome --save
```

添加到angular-cli-build.js文件：

vendorNpmFiles : [
    font-awesome/**/*.+(css|css.map|otf|eot|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)

Answer 2

使用 Angular2 RC5 和 angular-cli 1.0.0-beta.11-webpack.8 您可以通过 css 导入实现此目的。

只需安装 awesome 字体：

npm install font-awesome --save

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

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

(样式文件配置在angular-cli.json)

Answer 3

在 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" // -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".

在您想要的任何 html 文件中放置一些超棒的字体图标：

<i class="fa fa-american-sign-language-interpreting fa-5x" aria-hidden="true"> </i>

停止应用程序 Ctrl + c 然后使用 [=18 重新运行应用程序=] 因为观察者只针对 src 文件夹并且 angular-cli.json 没有观察到变化。
欣赏你超棒的图标！

Answer 4

如果您正在使用 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 基础设施。 ;)

Answer 5

最上面的答案有点过时了，还有一个更简单的方法。

通过 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

Answer 6

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

npm install --save font-awesome

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

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

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

        {
            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 设置，您可能不需要它或者您可能需要其他东西。

Answer 7

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

安装
样式（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 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>

Answer 8

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

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

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 正在将开发资产文件夹复制到 dist 资产文件夹

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

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

最后，在 .scss 文件中，我导入了很棒的 .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文件，解析[=25中的font-awesome路径=].

这很棘手，但这是我找到的解决 Electron.js

404 错误问题的唯一方法

Answer 9

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

Answer 10

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

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

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

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

Answer 11

2020 年 2 月更新：
fortawesome package now supports ng add but it is available 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 服务于运行您在开发模式下的应用程序，并导航到 http://localhost:4200.

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

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

保存此文件后，return浏览器可以看到应用标题旁边的 Font Awesome 图标。

还有一个相关问题 Angular CLI outputs the font-awesome font files the dist root 默认情况下 angular cli 将字体输出到 dist 根目录，这根本不是问题。

Answer 12

对于 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]

Answer 13

将其添加到您的 package.json 作为 "devDependencies" 字体真棒："version number"

转到命令提示符键入您配置的 npm 命令。

Answer 14

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

对于新的 Font Awesome 5+，angular 项目尚未发布，因此如果您想使用 font awesome 网站 atm 上提到的示例，您需要使用变通方法. （特别是 fas，far classes 而不是 faclass）

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

Style.css

中的代码

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

Answer 15

如果由于某种原因您无法通过 npm 安装软件包。您可以随时编辑 index.html 并在头部添加字体 awesome CSS。然后直接在项目中使用。

Answer 16

对于Angular6，

第一个npm install font-awesome --save

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

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

Answer 17

这篇post描述了如何将Fontawesome 5整合到Angular6（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

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

Answer 18

我浪费了几个小时试图获得与 AngularCLI 6.0.3 和 Material Design 一起工作的最新版本的 FontAwesome 5.2.0。我按照 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>

Answer 19

我想我会解决这个问题，因为 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";

希望对您有所帮助

Answer 20

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

使用 没有用在我的项目（新练习项目只有一周前）安装后，这里的示例图标也被复制到剪贴板过去一周内的 Font Awesome。

这 有效。如果在你的项目上安装 Font Awesome 后它还没有工作，我建议检查你图标上的 class 以删除 's' 看看它是否可以工作。

Answer 21

您可以使用 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

然后像这样使用它：

Answer 22

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

Answer 23

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

祝你好运！

Answer 24

对于 Angular 9 使用 ng :

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

Look Here For More Information

Answer 25

对于 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 文件中更合适。

Answer 26

已接受的答案已过时。

对于 angular 9 和 Fontawesome 5

安装 FontAwesome

npm install @fortawesome/fontawesome-free --save
在样式 angular.json 上注册

"node_modules/@fortawesome/fontawesome-free/css/all.min.css"
在您的申请中使用它

Answer 27

现在有几种方法可以在 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

Answer 28

在Angular11

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>

Answer 29

如果您想使用 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"
        ]

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

How to add font-awesome to Angular 2 + CLI project

angular

webpack

angular-cli

font-awesome

选项 1：

选项 2：