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

如何在我的项目中添加超棒的字体？

在Angular 2.0最终版本发布后，Angular2 CLI项目的结构已更改 -您不需要任何供应商文件，不需要system.js-仅Webpack。所以你也是：

1. npm install font-awesome --save

2. 在angular-cli.json文件中找到styles[]数组，并在此处添加真棒字体引用目录，如下所示：

   "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!?
         ],
         ...
     }
     ]
   ],
   

   在Angular的最新版本中，请改用angular.json文件，而不要使用../。例如，使用"node_modules/font-awesome/css/font-awesome.css"。

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

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

4. 停止应用程序Ctrl+ c然后使用来重新运行该应用程序，ng serve因为观察者仅用于src文件夹，并且未观察到angular-cli.json的更改。

5. 享受您的超赞图标！

如果您使用的是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破坏基础设施。;）

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

1. 通过npm安装

   npm install font-awesome --save

2. 在您的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";

使用~将使无礼的调查node_module。最好采用这种方式，而不要使用相对路径。原因是，如果您在npm上载了一个组件，并且在组件scss内导入了font-awesome，那么它将在〜而不是在错误的相对路径下正常工作。

此方法适用于任何包含CSS的npm模块。它也适用于scss。但是，如果要将css导入您的styles.scss中，它将无法正常工作（反之亦然）。这就是为什么

在Angular Project中使用Font-Awesome分为3部分

1. 安装
2. 样式（CSS / SCSS）
3. 在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>

与角材料一起使用

在您的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但仅适用于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：

有一个官方的故事不动了

安装真棒字体库并将依赖项添加到 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

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

将以下内容添加到 _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将真棒字体文件输出到dist根目录，默认情况下，角度cli将字体输出到dist根目录中，这根本不是问题。

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

我想我会为此解决，因为根据它们的文档，现在font-awesome的安装方式有所不同。

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

为什么它令人赞叹不已，现在让我escape然大悟，但我认为我会坚持使用最新版本，而不是退回到旧字体真棒。

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

希望这可以帮助

上面有很多说明，我建议您看一下。但是，需要注意的是：

安装后，在我的项目（只有一个星期的新实践项目）中，Using <i class="fas fa-coffee"></i> 不起作用，并且此处的示例图标也在过去一周内从Font Awesome复制到了剪贴板。

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

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

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

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

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

对于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 /图标即可。

经过一些试验，我设法完成了以下工作：

1. 使用npm安装：

   npm install font-awesome --save
   

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

   vendorNpmFiles : [
       font-awesome/**/*.+(css|css.map|otf|eot|svg|ttf|woff|woff2)',
   ]
   

3. 添加 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）

接受的答案已过时。

对于有角9和Fontawesome 5

1. 安装FontAwesome

   npm install @ fortawesome / fontawesome-free-保存

2. 在样式下的angular.json上注册

   “ node_modules/@fortawesome/fontawesome-free/css/all.min.css”

3. 在您的应用程序上使用它

编辑：我正在使用角度^ 4.0.0和电子^ 1.4.3

如果您遇到ElectronJS或类似问题，并且出现404错误，则可能的解决方法是uedit您的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中，assets由webpack创建了一个文件夹：

// 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正在将字体文件夹复制到dev资产文件夹。
• 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文件中使用），并使用导入.scss文件~font-awesome来解析中的字体真棒路径node_modules。

这很棘手，但这是我发现解决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（实际上是入门包中的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

浪费了几个小时后，我终于卸载了它，并使用以下命令安装了真棒字体（这将安装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>

“超凡字体”为您提供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 Change angular.json查找styles.scss而不是css：

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

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

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

将以下内容添加到_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-保存字体真棒角度字体真棒

然后导入您的模块：

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

祝好运！

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

使用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)" 

和regexp匹配那些svg引用（带有或不带有版本说明）。根据您的Webpack设置，您可能不需要它，也可能需要其他东西。

将其作为“ devDependencies”字体添加到您的package.json中：awesome：“版本号”

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

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

对于新的Font Awesome 5+，尚未发布角度项目，因此，如果您要使用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";

如果由于某种原因您无法安装软件包，请抛出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]

对于Angular 9使用ng：

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

在这里查看更多信息

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