Шрифт Awesome 5 с угловым

Как использовать шрифт-удивительный 5 с углового (2+)?

Я попытался добавить это внутри компонента:

import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';
...
constructor(){
   fontawesome.library.add(faChevronLeft, faChevronRight);
}

а затем в HTML:

<span class="fa" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

но это дает мне мигающий знак вопроса в круге.

24
angular angular-fontawesome font-awesome font-awesome-5

1 ответов

у вас есть два варианта:

1. Используйте библиотеку angular-fontawesome

просто следуйте инструкциям на их страница github.

2. Использовать fontawesome 5 напрямую

убедитесь, что вы установили все необходимые npm-пакетов.
Для Pro пакетов проверить этой.

  1. импорт соответствующих иконы:

    import {faChevronLeft, faChevronRight} from '@fortawesome/fontawesome-free-solid';
import fontawesome from '@fortawesome/fontawesome';

  2. добавить значки в fontawesome библиотека в глобальном масштабе (не внутри конструктора компонента): 

    fontawesome.library.add(faChevronLeft, faChevronRight);

  3. используйте его в html:

    <span class="fas" [class.fa-chevron-left]="direction==='left'" [class.fa-chevron-right]="direction==='right'"></span>

  4. обратите внимание на префиксы в html:

    • fas на fontawesome-free-solid иконки (работает также с fa)

      <span class="fas fa-chevron-left"></span>

    • fab на fontawesome-free-brands иконы

      <span class="fab fa-bitcoin"></span>

    • far на fontawesome-free-regular иконы

      <span class="far fa-chevron-left"></span>

    • fal на fontawesome-free-light иконки (pro)

      <span class="fal fa-chevron-left"></span>

важное замечание:

это нормально использовать переменные для определения fontawesome классов, как только это делается только один раз (при инициализации). Однако, если переменная изменяет свое значение, она не будет отражена в html. Считать это пример:

<span class="fas fa-chevron-{{direction}}"></span>

это поместит правильный значок во время инициализации, но если направление изменится после этого, оно не будет отражено.
Причина этого в том, что fontawesome 5 заменяет элементы, отнесенные к классу fa ... соответствующую svg и после его замены никакая переменная не влияет на это.
Если вы хотите, чтобы приведенный выше html отражал изменения во время выполнения, вы должны изменить его следующим образом:

<span *ngIf="direction==='right'"><span class="fas fa-chevron-right"></span></span>
<span *ngIf="direction==='left'"><span class="fas fa-chevron-left"></span></span>

внешний span необходимо как внутреннее span заменяется svg так что вы не можете поставить *ngIf на нем.

более дальнеишее чтение:

42