Блог

Главная - Вопросы по программированию - как использовать fortawesome в файле typescript?

как использовать fortawesome в файле typescript?

#angular #typescript #font-awesome

#angular #typescript #шрифт — потрясающий

Вопрос:

Я использую fortawesome для font-awesome, чтобы загружать только используемые значки.

Все используемые значки объявляются в app.module.ts.

 import { FontAwesomeModule, FaIconLibrary } from '@fortawesome/angular-fontawesome';
import {
    faSignOutAlt, faUser, faCog, faAlignLeft,
    faWarehouse, faVectorSquare, faTh, faArrowAltCircleDown,
    faArrowAltCircleLeft,faArrowAltCircleRight,faArrowAltCircleUp
} from '@fortawesome/free-solid-svg-icons';
import { faMap, faTrashAlt } from '@fortawesome/free-regular-svg-icons';
...
export class AppModule {
  constructor(private _library: FaIconLibrary) {
      _library.addIcons(faCog, faUser, faAlignLeft,
        faWarehouse, faVectorSquare, faSignOutAlt,
        faMap, faTrashAlt, faTh ,
        faArrowAltCircleDown, faArrowAltCircleLeft,faArrowAltCircleRight,
        faArrowAltCircleUp);
  }

он отлично работает в шаблоне

 <fa-icon [icon]="['fas', 'align-left']"></fa-icon>

но как вы поступаете, когда хотите использовать его в классе component?
Я хочу использовать меню кнопки выбора в моем шаблоне следующим образом:

 <p-selectButton [options]="directions" [(ngModel)]="sens"></p-selectButton>

this.directions = [
  {label: '', value: 'd', icon: 'fas fa-arrow-circle-right'},
  {label: '', value: 'b', icon: 'fas fa-arrow-circle-down'},
  {label: '', value: 'h', icon: 'fas fa-arrow-circle-up'},
  {label: '', value: 'g', icon: 'fas fa-arrow-circle-left'}
];

результат:
введите описание изображения здесь

что я должен использовать вместо «fas fa-стрелка-круг-вправо», чтобы он работал, или он предназначен для использования их только в шаблонах?

Комментарии:

1. Вы получили ответ на это?

2. При создании набора используйте опцию для создания веб-шрифта, а не svg. blog.fontawesome.com/webfont-vs-svg

Ответ №1:

Использовать

 import {faSignOutAlt as fasSignOutAlt, 
        faUser as fasUser, 
        faCog as fasCog, 
        faAlignLeft as fasAlignLeft,
        ...
       } from '@fortawesome/free-solid-svg-icons'; //<-- as fas[ICON] when free-solid

import { faMap as farMap, 
         faTrashAlt as farTrashAlt
       } from '@fortawesome/free-regular-svg-icons'; //<-- as far[ICON] when free-regular

...

constructor(_library: FaIconLibrary) {
    library.addIconPacks(fas)
    _library.addIcons(fasSignOutAlt, fasUser, fasCog, fasAlignLeft,...
                      farMap,farTrashAlt,...) 
}

В .html

 <!--see that you use kebab case, (the '-' to separate word)-->
<fa-icon [icon]="['fas', 'sign-out-alt']"></fa-icon>
<fa-icon [icon]="['far', 'trash-alt']"></fa-icon>