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

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

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

1> AIon..：

---

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

npm install font-awesome --save

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

],

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

停止应用程序Ctrl+ c然后重新运行应用程序,ng serve因为观察者仅用于src文件夹,并且没有观察到angular-cli.json的更改.

享受你真棒图标吧!

---

注意:不再使用`addons`属性.在`styles`下包含`font-awesome.css`文件就足够了.请参阅https://github.com/angular/angular-cli/blob/master/docs/documentation/stories/include-font-awesome.md

---

你能解释一下`addons`的作用吗？我看到[它被记录为](https://github.com/angular/angular-cli/blob/master/packages/angular-cli/lib/config/schema.json)*"为已安装的第三方插件保留配置. "*,但我找不到任何处理[在Angular-CLI代码中](https://github.com/angular/angular-cli/search?type=Code&q=addons).

---

@Rosdi Kasim Jan - 你可以这样做 - 但在更大的应用程序中,你通常不使用cdns.首先是因为有人可以破解它们并间接破坏你的应用程序.第二,因为它不仅仅是字体 - 真棒 - 你需要其他外部库,如bootstrap,dnd库等 - 如果你有一个单独的http请求 - 对于cdn - 对于每一个,它的性能都很糟糕.你做的是用npm下载 - 并使用webpack或其他东西将所有代码捆绑在一个文件中,缩小和uglify - 这就是你在移动设备上运行应用程序的方式 - 资源很少.

2> F.D.Castel..：

---

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

---

最佳答案.小改进:使用`~`而不是`../ node_modules /`,例如`@import'~font-awesome/scss/font-awesome.scss';`

---

使用angular4和scss不适合我.我可以看到css而不是图标

---

从`〜字体真棒/ CSS/FONT-awesome.min.css`使用`.css`进口,它工作正常(缺省FA-字体路径)angular4/CLI

3> Ced..：

---

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

通过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中,它将无法工作(反之亦然).这就是原因

4> muttonUp..：

---

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

使用Angular材质

在你的app.module.ts中修改构造函数以使用 MdIconRegistry

export class AppModule {
  constructor(matIconRegistry: MatIconRegistry) {
    matIconRegistry.registerFontClassAlias('fontawesome', 'fa');
  }
}

并添加MatIconModule到您的@NgModule导入

@NgModule({
  imports: [
    MatIconModule,
    ....
  ],
  declarations: ....

}

---

现在,您可以在任何模板文件中执行此操作

5> shusson..：

---

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

6> Kuncevič..：

---

选项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即可

示例使用:

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/根目录,这根本不是问题.

7> Nabel..：

---

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

希望这可以帮助