Font Awesome 4 bilan tanishuv
Asosiy ikonkalar
Font Awesome ikonkalaridan foydalanish uchun HTML sahifangizning <head> bo‘limiga quyidagi qatorni qo‘shing:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Eslatma: Hech narsani yuklab olish yoki o‘rnatish shart emas!
Font Awesome ikonkalari fa prefiksi va ikonka nomi yordamida joylashtiriladi.
Misol
Quyidagi kod:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<i class="fa fa-car"></i>
<i class="fa fa-car" style="font-size:48px;"></i>
<i class="fa fa-car" style="font-size:60px;color:red;"></i>
</body>
</html>
Natija:
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.
Kattaroq ikonkalar
fa-lg (33% ga kattalashtiradi), fa-2x, fa-3x, fa-4x yoki fa-5x klasslari ikonkalar o‘lchamini ularning konteyneriga nisbatan kattalashtirish uchun ishlatiladi.
Misol
Quyidagi kod:
<i class="fa fa-car fa-lg"></i>
<i class="fa fa-car fa-2x"></i>
<i class="fa fa-car fa-3x"></i>
<i class="fa fa-car fa-4x"></i>
<i class="fa fa-car fa-5x"></i>
Natija:
Maslahat: Agar ikonkalaringizning yuqori va pastki qismi kesilib qolayotgan bo‘lsa, line-height qiymatini oshiring.
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><i class="fa-li fa fa-check-square"></i>List icons</li>
<li><i class="fa-li fa fa-spinner fa-spin"></i>List icons</li>
<li><i class="fa-li fa fa-square"></i>List icons</li>
</ul>
Natija:
- List icons
- List icons
- List icons
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="fa 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:
Animatsiyali ikonkalar
fa-spin klassi istalgan ikonkani aylantiradi, fa-pulse klassi esa istalgan ikonkani 8 qadamda aylantiradi.
Misol
Quyidagi kod:
<i class="fa fa-spinner fa-spin"></i>
<i class="fa fa-circle-o-notch fa-spin"></i>
<i class="fa fa-refresh fa-spin"></i>
<i class="fa fa-cog fa-spin"></i>
<i class="fa 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="fa fa-shield"></i>
<i class="fa fa-shield fa-rotate-90"></i>
<i class="fa fa-shield fa-rotate-180"></i>
<i class="fa fa-shield fa-rotate-270"></i>
<i class="fa fa-shield fa-flip-horizontal"></i>
<i class="fa fa-shield 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="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x"></i>
</span>
fa-twitter on fa-circle-thin<br>
<span class="fa-stack fa-lg">
<i class="fa fa-circle fa-stack-2x"></i>
<i class="fa fa-twitter fa-stack-1x fa-inverse"></i>
</span>
fa-twitter (inverse) on fa-circle<br>
<span class="fa-stack fa-lg">
<i class="fa fa-camera fa-stack-1x"></i>
<i class="fa fa-ban fa-stack-2x text-danger" style="color:red;"></i>
</span>
fa-ban on fa-camera
Natija:
fa-twitter (inverse) on fa-circle
fa-ban on fa-camera
Qat’iy kenglikdagi ikonkalar
fa-fw klassi ikonkalarga qat’iy kenglik berish uchun ishlatiladi. Bu klass ikonkalarning turli kengliklari tekislashni buzganda foydali. Ayniqsa, Bootstrap’ning navigatsiya ro‘yxatlari (navlist) va ro‘yxat guruhlarida (list group) qo‘l keladi.
Misol
<div class="list-group">
<a href="#" class="list-group-item"><i class="fa fa-home fa-fw"></i> Home</a>
<a href="#" class="list-group-item"><i class="fa fa-book fa-fw"></i> Library</a>
<a href="#" class="list-group-item"><i class="fa fa-pencil fa-fw"></i> Applications</a>
<a href="#" class="list-group-item"><i class="fa fa-cog fa-fw"></i> Settings</a>
</div>
O‘zingiz sinab ko‘ring »
Bootstrap
Font Awesome barcha Bootstrap komponentlari bilan ham a’lo darajada ishlaydi.
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!