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:
- 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
- Czcionka niesamowita
- Oddział GitHub tego wpisu.