angular - 从 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 ...不起作用。

score 25 · Accepted Answer

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

score 4 · Accepted Answer

就像这里的文档一样，你可以这样做

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

score 3 · Accepted Answer

我是这样做的，我首先将 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 也导入导入部分。

将以下内容添加到 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 中测试。

score 1 · Accepted Answer

为什么不将字体加载为资产（将文件添加到资产文件夹并在 css 文件中定义字体）？然后你就可以使用所有字符（图标）了。

angular - 从 Fontawesome 导入所有图标

4 回答 4

Related

Reference