Font Awesome 5 с угловым

Question

Как использовать font-awesome 5 с Angular (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>

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

Answer 1

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

---

1. Используйте угловатую библиотеку

Просто следуйте инструкциям на их странице 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 иконки (про)

     <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 в теме.

Дальнейшее чтение:

• Используйте fontawesome 5 с node.js
• FontAwesome API

Answer 2

Самый простой способ - установить его через npm, а затем импортировать стили:

1)

npm i @fortawesome/fontawesome-free --save

2) Импортируйте стили в angular.json

"styles": [
  ...
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
  ...
]

И тогда вы можете использовать его, как в их документации

<i class="fas fa-address-card"></i>

Answer 3

Я использую Font Awesome 5 в Angular

Это HTML код

<fa-icon [icon]="isFavorite ? ['fas','star'] : ['far','star']" (click)="onClick()"> Star </fa-icon>

Это мой компонент

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'favorite',
  templateUrl: './favorite.component.html',
  styleUrls: ['./favorite.component.css']
})
export class FavoriteComponent implements OnInit {
isFavorite: boolean;
  prefix:string;
  constructor() { }    
  ngOnInit() { }

  onClick(){
    this.isFavorite = !this.isFavorite;    
  }
}
`

Answer 4

Другой способ рендеринга FontAwesome 5 в Angular с использованием WebFont или SVG:

https://www.npmjs.com/package/@ui4ngx/fontawesome

Демо

Это использует шаблоны HTML вместо рендеринга Javascript. Он предоставляет те же функции, что и библиотека angular-fontawesome.

Для более старой версии (v4) вы можете использовать это

https://www.npmjs.com/package/@ui4ngx/fontawesome4

Демо