Импортировать все иконки из Fontawesome

Question

Я использовал Fontawesome 5 в своем проекте Angular следующим образом:

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

и в конструкторе:

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

Но очень глупо импортировать каждую иконку отдельно. Можно ли как-то импортировать сразу все иконки?

обн: import * as icons ... не работает.

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

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

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

Импортировать Font AwesomeModule также в раздел импорта.

Добавьте следующее в ваш конструктор модуля приложения:

 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-регулярно-svg-icons": "^5.10.1", "@fortawesome/free-solid-svg-icons": "^5.10 0,1",

Примечание: я сделал обновление до версии 0.3.0 пакета angular-fontawesome.

Проверено в Angular 8.

Answer 4

Почему бы не загрузить шрифт как ресурс (добавить файлы в папку активов и определить шрифт в файле css)? Тогда у вас есть все символы (значки), доступные для использования.