Burchak bo'yicha bosqichma-bosqich qo'llanma

"Font Awesome" bu internetdagi eng mashhur piktogramma asboblar to'plami bo'lib, u qayta ishlab chiqilgan va noldan qurilgan.

Buning ustiga, piktogramma shrift ligaturalari, SVG ramkasi, React kabi mashhur front-end kutubxonalari uchun rasmiy npm paketlari va yangi CDN-ga kirish kabi xususiyatlar.

Ushbu postda men sizga Angular-da faqat besh bosqichda foydalanish uchun Font Awesome-ni qanday sozlashni ko'rsataman.

Ushbu bosqichlarda biz maxsus "Burchak paketidan" foydalanmasdan Font Awesome-ni sozlaymiz. Kelgusi postda u rasmiy paket yordamida sozlanadi, bu yanada soddaroq va bizda Font Awesome xuddi shu burchak ekotizimida ishlaydi.

1-qadam: Loyihangizni boshlang

Agar siz Angular loyihangizda Font Awesome-dan foydalanish haqida o'ylayotgan bo'lsangiz, ehtimol sizda allaqachon ishga tushirilgan loyiha mavjud. Biroq, ushbu qo'llanma uchun loyihani noldan boshlaylik.

2-qadam: Font Awesome-ni o'rnating

Font Awesome-ni o'rnating.

3-qadam: Ajoyib shriftni qo'shing

Font Awesome-ni loyihamizga kiritishning bir necha yo'li mavjud:

  1. angular.json ni oching va uslublar qatoriga yangi yozuv kiriting:

2. styles.scss ni oching va faylga yangi yozuv kiriting:

4-qadam: Shrift Awesome CSS sinfini qo'shing

Shabloningiz komponentini oching va istalgan HTML elementlariga Font Awesome CSS sinfini qo'shing:

5-qadam: Ilovangizni ishga tushiring

Ilovangizni ishga tushiring:

ng serve

Resurslar

  • "Ajoyib shrift"
  • Ushbu postning "GitHub filiali".