Samouczek Angulara krok po kroku

Font Awesome to najpopularniejszy zestaw ikon w Internecie, który został przeprojektowany i zbudowany od podstaw.

Oprócz tego funkcje takie jak ligatury czcionek ikon, framework SVG, oficjalne pakiety npm dla popularnych bibliotek front-end, takich jak React, oraz dostęp do nowego CDN.

W tym poście pokażę Ci jak skonfigurować Font Awesome do użycia w Angularze w zaledwie pięciu krokach.

W tych krokach skonfigurujemy Font Awesome bez użycia konkretnego pakietu Angular. W przyszłym poście zostanie on skonfigurowany przy użyciu oficjalnego pakietu, który jest jeszcze prostszy, a Font Awesome będzie działał z tym samym ekosystemem Angular.

Krok 1: Rozpocznij swój projekt

Jeśli myślisz o użyciu Font Awesome w swoim projekcie Angular, prawdopodobnie masz już zainicjowany projekt. Jednak w tym samouczku zacznijmy od projektu od zera.

Krok 2: Zainstaluj Font Awesome

Zainstaluj czcionkę Awesome.

Krok 3: Dołącz niesamowitą czcionkę

Istnieje kilka sposobów na włączenie Font Awesome do naszego projektu:

  1. Otwórz angular.json i wstaw nowy wpis do tablicy stylów:

2. Otwórz styles.scss i wstaw nowy wpis do pliku:

Krok 4: Dodaj klasę CSS Font Awesome

Otwórz komponent szablonu i dodaj klasę CSS Font Awesome w dowolnym elemencie HTML:

Krok 5: Uruchom aplikację

Uruchom swoją aplikację:

ng serve

Zasoby