Un tutorial Angular pas cu pas

„Font Awesome” este cel mai popular set de instrumente de pictograme de pe internet, care a fost reproiectat și construit de la zero.

Pe lângă acestea, caracteristici precum ligăturile de fonturi cu pictograme, un cadru SVG, pachete oficiale npm pentru biblioteci front-end populare precum React și acces la un nou CDN.

În această postare, vă voi arăta cum să configurați Font Awesome, pentru a fi folosit în Angular în doar cinci pași.

În acești pași, vom configura Font Awesome fără a folosi „pachetul Angular” specific. Într-o postare viitoare, va fi configurat folosind pachetul oficial, care este și mai simplu, și vom avea Font Awesome să lucreze cu același ecosistem Angular.

Pasul 1: Porniți proiectul

Dacă vă gândiți să utilizați Font Awesome în proiectul dvs. Angular, probabil că aveți deja un proiect inițializat. Cu toate acestea, pentru acest tutorial, să începem cu un proiect de la zero.

Pasul 2: Instalați Font Awesome

Instalați Font Awesome.

Pasul 3: Includeți Font Awesome

Există mai multe moduri de a include Font Awesome în proiectul nostru:

  1. Deschideți angular.json și introduceți o nouă intrare în matricea de stiluri:

2. Deschideți styles.scss și introduceți o nouă intrare în fișier:

Pasul 4: Adăugați Font Awesome CSS Class

Deschideți componenta șablonului și adăugați clasa CSS Font Awesome în oricare dintre elementele HTML:

Pasul 5: rulați aplicația

Rulați aplicația:

ng serve

Resurse

  • „Font minunat”
  • „Ramura GitHub” a acestei postări.