Эта история изначально была опубликована здесь.

Эта статья основана на Angular CLI 15.1.4, Node 18.13.0, npm 8.19.3.

FontAwesome — популярная библиотека иконок, которая предоставляет масштабируемые векторные иконки. FontAwesome легко использовать в Angular с пакетом @fortawesome/angular-fontawesome, который предоставляет компоненты Angular для иконок FontAwesome. Эта статья о том, как использовать fontawesome в вашем проекте Angular.

Если вы хотите узнать, как установить, перейдите к разделу Как установить fontawesome в Angular.

Как использовать fontawesome 5+ в Angular 15?

После успешной установки fontawesome в вашем проекте Angular. Выполните следующие три шага:

  1. Добавьте FontAwesomeModule.
  2. Свяжите значок со свойством в вашем компоненте
  3. Используйте значок в своем шаблоне.

1. Добавьте модуль в app.module.ts

Добавьте FontAwesomeModule к imports в src/app/app.module.ts.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';

@NgModule({
  imports: [BrowserModule, FontAwesomeModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

2. Свяжите значок со свойством в вашем компоненте

Привяжите иконку, которую вы хотите использовать, к переменной в компоненте, где должна использоваться иконка, например src/app/app.component.ts.

import { Component } from '@angular/core';
import { faCoffee } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  faCoffee = faCoffee;
}

3. Используйте значок в своем шаблоне

Предоставьте значок свойству icon в компоненте fa-icon.

<fa-icon [icon]="faCoffee"></fa-icon>

Вместо использования привязки свойств вы также можете предоставить массив со строковыми значениями непосредственно в своем шаблоне. Это полезно при наслоении значков, см. Fontawesome Docs — Наслоение.

<fa-layers [fixedWidth]="true">
  <fa-icon [icon]="['fas', 'square']"></fa-icon>
  <fa-icon
    [inverse]="true"
    [icon]="['fas', 'spinner']"
    transform="shrink-6"
  ></fa-icon>
</fa-layers>

TL;DR

  • Чтобы использовать Font Awesome в Angular,
  • импортируйте FontAwesomeModule в свои модули и
  • укажите значение свойства icon, которое вы хотите использовать с компонентом fa-icon в шаблоне.

Спасибо за внимание. Если у вас есть вопросы, используйте функцию комментариев или отправьте мне сообщение @mariokandut . Если вы хотите узнать больше об Angular, ознакомьтесь с этими Учебными пособиями по Angular.

Ссылки (и большое спасибо): Angular, fontawesome Angular Component for Font Awesome