从Fontawesome导入所有图标

Question

我在我的Angular项目中使用Fontawesome 5，方式如下：

import fontawesome from '@fortawesome/fontawesome';
import { faBold, faItalic, faUnderline } from '@fortawesome/fontawesome-free-solid';

并在构造函数中：

fontawesome.library.add(faBold, faItalic, faUnderline)

但是逐个导入每个图标非常愚蠢。我是否可以一次性导入所有图标？

更新: import * as icons ... 不起作用。

- Vladimir Humeniuk

Answer 1

import { fas } from '@fortawesome/fontawesome-free-solid';

然后

fontawesome.library.add(fas)

其他样式同理

import { fab } from '@fortawesome/fontawesome-free-brands';
import { far } from '@fortawesome/fontawesome-free-regular';
...
fontawesome.library.add( fab, far );

- sr9yar

---

你好，能否请您解释一下为什么这可以正常工作？当我安装fontawesome 5时，node_modules中没有创建任何fontawesome-free-solid文件夹，因此编译时会出现错误。它是如何工作的？谢谢。 - mimic

在最近的版本中，您应该使用addIconPacks方法而不是add。 - yekanchi

Answer 2

就像这里的文档所述，你可以这样做：

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

export class AppModule {

constructor(library: FaIconLibrary) {
  library.addIconPacks(fas, far);
  }
}

- Arun Kumar A.J

Answer 3

以下是我是如何操作的，首先我将 Font Awesome 包导入到应用程序模块中：

import { fas } from '@fortawesome/free-solid-svg-icons';
import { far } from '@fortawesome/free-regular-svg-icons';
import { fab } from '@fortawesome/free-brands-svg-icons';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
import { library } from '@fortawesome/fontawesome-svg-core';

将FontAwesomeModule也导入到imports部分中。

在app模块的构造函数中添加以下内容：

 constructor(){
    library.add(fab, far, fas);
  }

现在，您可以像此标记示例中那样从任何组件内引用 Font Awesome 图标：

    <div class="crop"
     (click)="onClick()"
     [style.width.px]="starWidth"
     [title]="rating">
  <div style="width: 75px">
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
    <span><fa-icon [icon]="['far', 'star']"></fa-icon></span>
  </div>
</div>

请注意，如果您不使用“fas”库中的实心图标，则必须指定Font Awesome图标库的类型，例如常规图标的“far”。

我最终使用了以下npm包： "@fortawesome/angular-fontawesome": "^0.3.0", "@fortawesome/fontawesome-svg-core": "^1.2.21", "@fortawesome/free-brands-svg-icons": "^5.10.1", "@fortawesome/free-regular-svg-icons": "^5.10.1", "@fortawesome/free-solid-svg-icons": "^5.10.1"

请注意：我将angular-fontawesome包的版本降级到0.3.0。

在Angular 8中进行了测试。

- Tore Aurstad

Answer 4

为什么不将字体作为资产加载（将文件添加到资产文件夹并在CSS文件中定义字体）？这样，您就可以使用所有字符（图标）。

- August