Font Awesome 5 bilan tanishuv
Font Awesome 5
Font Awesome 5 ning 7842 ta ikonkadan iborat PRO nashri va 1588 ta ikonkadan iborat FREE (bepul) nashri bor. Ushbu darslikda asosiy e’tibor FREE nashriga qaratiladi.
Bepul Font Awesome 5 ikonkalaridan foydalanish uchun Font Awesome kutubxonasini yuklab olishingiz yoki Font Awesome saytida ro‘yxatdan o‘tib, Font Awesome’ni veb-sahifangizga qo‘shishda ishlatiladigan kodni (u KIT CODE deb ataladi) olishingiz mumkin.
Biz KIT CODE usulini afzal ko‘ramiz. Kodni olganingizdan so‘ng, atigi bitta qator HTML kodini qo‘shish orqali veb-sahifalaringizda Font Awesome’dan foydalanishni boshlashingiz mumkin:
<script src="https://kit.fontawesome.com/yourcode.js" crossorigin="anonymous"></script>
Misol
Biz a076d05399 kodini oldik va shu kod bilan script tegini qo‘shib, Font Awesome’dan foydalanishni boshlashimiz mumkin:
<!DOCTYPE html>
<html>
<head>
<script src="https://kit.fontawesome.com/a076d05399.js" crossorigin="anonymous"></script>
</head>
<body>
<i class="fas fa-clock"></i>
</body>
</html>
Natija:
Eslatma: Hech narsani yuklab olish yoki o‘rnatish shart emas!
O‘z KIT CODE’ingizni oling
Ro‘yxatdan o‘ting va o‘z kodingizni quyidagi saytda bepul oling:
fontawesome.comFont Awesome 5 dagi yangiliklar
Font Awesome 5 dagi yangilik — fas prefiksi, Font Awesome 4 esa fa’dan foydalanadi.
fas’dagi s harfi solid (to‘liq bo‘yalgan) degan ma’noni bildiradi, ba’zi ikonkalarda esa far prefiksi bilan belgilanadigan regular (oddiy) ko‘rinishi ham bor:
Font Awesome inline elementlar bilan ishlatish uchun mo‘ljallangan. Ikonkalar uchun ko‘pincha <i> va <span> elementlaridan foydalaniladi.
Shuni ham yodda tutingki, ikonka konteynerining font-size qiymati yoki rangini o‘zgartirsangiz, ikonka ham o‘zgaradi. Xuddi shu narsa soyaga va CSS orqali meros qilib olinadigan boshqa har qanday xususiyatga ham tegishli.
Misol
<i class="fas fa-clock" style="font-size:120px;color:#2196F3"></i>
<i class="far fa-clock" style="font-size:120px;color:#2196F3"></i>
Natija:
Ikonkalar o‘lchamini belgilash
fa-xs, fa-sm, fa-lg, fa-2x, fa-3x, fa-4x, fa-5x, fa-6x, fa-7x, fa-8x, fa-9x yoki fa-10x klasslari ikonkalar o‘lchamini ularning konteyneriga nisbatan sozlash uchun ishlatiladi.
Misol
Quyidagi kod:
<i class="fas fa-clock fa-xs"></i>
<i class="fas fa-clock fa-sm"></i>
<i class="fas fa-clock fa-lg"></i>
<i class="fas fa-clock fa-2x"></i>
<i class="fas fa-clock fa-5x"></i>
<i class="fas fa-clock fa-10x"></i>
Natija:
Ro‘yxat ikonkalari
fa-ul va fa-li klasslari tartiblanmagan ro‘yxatlardagi standart markerlarni almashtirish uchun ishlatiladi.
Misol
Quyidagi kod:
<ul class="fa-ul">
<li><span class="fa-li"><i class="fas fa-check-square"></i></span>List Item</li>
<li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>List Item</li>
<li><span class="fa-li"><i class="fas fa-square"></i></span>List Item</li>
</ul>
Natija:
Animatsiyali ikonkalar
fa-spin klassi istalgan ikonkani aylantiradi, fa-pulse klassi esa istalgan ikonkani 8 qadamda aylantiradi.
Misol
Quyidagi kod:
<i class="fas fa-spinner fa-spin"></i>
<i class="fas fa-circle-notch fa-spin"></i>
<i class="fas fa-sync-alt fa-spin"></i>
<i class="fas fa-cog fa-spin"></i>
<i class="fas fa-cog fa-pulse"></i>
<i class="fas fa-spinner fa-pulse"></i>
Natija:
Eslatma: IE8 va IE9 CSS3 animatsiyalarini qo‘llab-quvvatlamaydi.
Burilgan va ag‘darilgan ikonkalar
fa-rotate-* va fa-flip-* klasslari ikonkalarni burish va ag‘darish uchun ishlatiladi.
Misol
Quyidagi kod:
<i class="fas fa-horse"></i>
<i class="fas fa-horse fa-rotate-90"></i>
<i class="fas fa-horse fa-rotate-180"></i>
<i class="fas fa-horse fa-rotate-270"></i>
<i class="fas fa-horse fa-flip-horizontal"></i>
<i class="fas fa-horse fa-flip-vertical"></i>
Natija:
Ustma-ust joylashgan ikonkalar
Bir nechta ikonkani ustma-ust joylashtirish uchun ota elementda fa-stack klassidan, oddiy o‘lchamdagi ikonka uchun fa-stack-1x klassidan, kattaroq ikonka uchun esa fa-stack-2x’dan foydalaning.
fa-inverse klassidan ikonkaning muqobil rangi sifatida foydalanish mumkin. O‘lchamni yanada aniqroq boshqarish uchun ota elementga kattaroq ikonka klasslarini ham qo‘shishingiz mumkin.
Misol
Quyidagi kod:
<span class="fa-stack fa-lg">
<i class="fas fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle (solid)<br>
<span class="fa-stack fa-lg">
<i class="far fa-circle fa-stack-2x"></i>
<i class="fab fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle (regular)<br>
<span class="fa-stack fa-lg">
<i class="fas fa-camera fa-stack-1x"></i>
<i class="fas fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera
Natija:
Qat’iy kenglikdagi ikonkalar
Harflar va boshqa belgilar singari, ikonkalar ham turli kenglikka ega bo‘lishi mumkin; agar ikonkalarni ro‘yxat yoki menyudagi kabi vertikal tekislash kerak bo‘lsa, bu muammo tug‘dirishi mumkin.
fa-fw klassi ikonkalarga qat’iy kenglik berish uchun ishlatiladi.
Misol
<p>Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v fa-fw"></i> Icon 1</div>
<div><i class="fas fa-band-aid fa-fw"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b fa-fw"></i> Icon 3</div>
<p>Without Fixed Width:</p>
<div><i class="fas fa-arrows-alt-v"></i> Icon 1</div>
<div><i class="fas fa-band-aid"></i> Icon 2</div>
<div><i class="fab fa-bluetooth-b"></i> Icon 3</div>
Natija:
O‘zingiz sinab ko‘ring »
Hoshiyali va chetga surilgan ikonkalar
fa-border, fa-pull-right yoki fa-pull-left klasslari ajratilgan iqtiboslar (pull quote) yoki maqola ikonkalari uchun ishlatiladi.
Misol
Quyidagi kod:
<i class="fas fa-quote-left fa-3x fa-pull-left fa-border"></i>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Natija:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!