如何在Angular 2 + CLI项目中添加font-awesome

Question

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

如何为我的项目添加font-awesome？

Answer 1

在Angular 2.0最终版本发布之后,Angular2 CLI项目的结构已经改变 - 您不需要任何供应商文件,也不需要system.js - 只需要webpack.所以你也是:

1. npm install font-awesome --save

2. 在angular-cli.json文件中找到styles[]数组并在这里添加font-awesome references目录,如下所示:

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

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. 享受你真棒图标吧!

Answer 2

如果您使用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 3

最佳答案有点过时,有一种稍微简单的方法.

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

使用~将使sass调查node_module.这样做比用相对路径做得更好.原因是,如果你在npm上传一个组件,并在组件scss中导入font-awesome,那么它将与〜一起正常工作,而不是在那个时候错误的相对路径.

此方法适用于包含css的任何npm模块.它也适用于scss.但是,如果要将css导入到styles.scss中,它将无法工作(反之亦然).这就是原因

Answer 4

在Angular Projects中使用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>

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

Answer 5

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

Answer 6

选项1:

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

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

导入模块:

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 { }

如果您正在使用Angular CLI,请将font-awesome CSS添加到angular-cli.json中的样式

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

注意:如果使用SCSS预处理器,只需更改scss的css即可

示例使用:

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

Optoin 2:

有一个官方的说法不动了

安装font-awesome库并添加依赖项 FontAwesomeModule

src/app/app.module.ts

使用CSS

将Font Awesome CSS图标添加到您的应用中...

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

使用SASS

创建一个空文件src/app/app.component.ts在src/app/app.component.html.

将以下内容添加到package.json:

npm install --save font-awesome 在_variables.scss添加以下内容:

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

测试

运行ng以在开发模式下运行应用程序,并导航到http:// localhost:4200.

要验证Font Awesome已正确设置,请将src/app/app.component.html更改为以下内容...

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

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

另外还有一个相关的问题Angular CLI输出字体 - awesome字体文件,因为默认情况下,角度cli会将字体输出到src/根目录,这根本不是问题.

Answer 7

接受的答案已过时。

对于 angular 9 和 Fontawesome 5

1. 安装 FontAwesome

   npm install @fortawesome/fontawesome-free --save

2. 在 angular.json 下的样式中注册它

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

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

Answer 8

我想我会为此解决，因为根据它们的文档，现在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";

希望这可以帮助

Answer 9

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

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

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

Answer 10

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

对于 Angular 6，

第一的 npm install font-awesome --save

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

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

Answer 12

这篇文章描述了如何将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：Angular 包

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

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

使用 FontAwesome 5 Angular 包：

npm install @fortawesome/angular-fontawesome

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