UZFOR
  1. Lenta
  2. gi8ri7
Font Awesome sayt grafikasi haqida (84)
Mavzu fayllari
Shikoyat qilish
gi8ri7
#1
Assalomu aleykum forumdoshlar men bugun 1-darsimda Font Awesome`dan qanday foydalanish haqida yozmoqchiman demak boshladik.
Font Awesome sizni anchagina ovora garchiliklardan halos etadi, Ya'ni Font Awesome`ni saytingizga o'rnatish orqali saytingiz uchun rasmchalar izlashdan, tayorlashdan halos bo'lasiz. PHP`da ishlovchi saytning tepa (head) qismiga ikki qator kod yozasiz va tayyor qo'rqmay saytingizga icon`kalarni chiqaraverasiz !

Font Awesome dan foydalanish uchun quidagi kodni saytingizning tepa (head) qismiga yozing.



Kerakli icon`ni sahifaga chiqarish uchun esa mana bu koddan foydalanamiz



Belgilangan o`lcham


Hohlagan o'lchamga keltirish uchun


Rang berish


Aylanib turuvchi icon

Aylantirish



Agar iconkani standart usulda chiqarib boshqa amallarni teng bajarmoqchi bo'lsangiz ya'ni iconka menu classda bo'lsa menu text rangi qanday bo'lsa iconka rangi ham shunday chiqadi buni barchasini birdaniga o'zgartirmoqchi bo'lsangiz yoki border radus bermoqchi bo'lsangiz style.css orqali bajarish ham mumkin buning uchun

Sahifaga iconkadi quidagicha chiqarishingiz mumkin



Kabi moslab olishingiz mumkin

Barcha iconlar kodlari ???
https://www.w3schools.com/icons/fontawesome_icons_webapp.asp
Yoki java tel ochishda qiynalsa
http://tanaffus.ru/wm/font-awesome/code.php
8
Kod · PHP1 qator
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Kod · PHP1 qator
<i class="fa fa-car"></i>
Kod · PHP15 qator
fa-fw fa-lg fa-2x fa-3x fa-4x fa-5x 



<i class="fa fa-car fa-fw"></i>

<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>
Kod · PHP5 qator
style="font-size:48px;" 



<i class="fa fa-car" style="font-size:48px;"></i>
Kod · PHP5 qator
style="color:red;"



<i class="fa fa-car" style="color:red;"></i>
Kod · PHP5 qator
fa-spin



<i class="fa fa-spinner fa-spin"></i>
Kod · PHP11 qator
<i class="fa fa-car"></i>

<i class="fa fa-car fa-rotate-90"></i>

<i class="fa fa-car fa-rotate-180"></i>

<i class="fa fa-car fa-rotate-270"></i>

<i class="fa fa-car fa-flip-horizontal"></i>

<i class="fa fa-car fa-flip-vertical"></i>
Kod · PHP1 qator
<div class="menu"><i class="fa fa-car fa-fw"></i>Menu uchun link</div>
Kod · PHP11 qator
// style.css uchun



.menu i.fa {

color: #777;

border-radius: 50px;

}
kHakimzhon tomonidan tahrirlandi ·
XuSha
#2
Master-X, sizni saytingizdagiday sahifani pastiga tushganda TEPAGA dip chiqadiyu shuni qaysi kod orqali qoysam boladi?
0
Akbarali
#3
XuSha, # XuSha (25.01.2019 / 19:04)
Master-X, sizni saytingizdagiday sahifani pastiga tushganda TEPAGA dip chiqadiyu shuni qaysi kod orqali qoysam boladi?
.
Juda murakkablashtrib yubordima ? . tepaga knopkasini oddiy div=id bilan qilsa ham bo'ladi.
.
1000 postim ekan.
4
Kod · JavaScript43 qator
<script type="text/jаvаsсriрt" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

<script type="text/jаvаsсriрt">

$(function() {

$.fn.scrollToTop = function() {

$(this).hide().removeAttr("href");

if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")

var scrollDiv = $(this);

$(window).scroll(function() {

if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")

else $(scrollDiv).fadeIn("slow")

});

$(this).click(function() {

$("html, body").animate({scrollTop: 0}, "slow")

})

}

});

$(function() {

$("#Go_Top").scrollToTop();

});

</script>

<a style="position: fixed; bottom: 25px; right: 1px; cursor: pointer; display: block;" id="Go_Top">

<img src=" https://saytuz.ru/gotop.png alt="Наверх" title="Yuqoriga" width="50px"></a>
tahrirlandi ·
MR_BaxtiyoR
#4
Men ham foydalanaman, qulay, va sahifa tezligiga ta'sir qilmaydi
0
NetLizard
#5
Kimga kerak bolsa yuklab olsin.
Font Awesome v 4.4.0
0
Biriktirilgan fayllar 1
zipfont-awesome.zip148.98 KB · 245 yuklab olingan
Temur8818
#6
Oldin bu iconkalarni java tel ochmasdi xozir ochyabdimi?
0
gi8ri7
#7
Temur8818, Font Awesome ochaveradi Bootstrap va Google ochmaydi
1
Brigand
#8
Temur8818, # Temur8818 (27.01.2019 / 22:49)
Oldin bu iconkalarni java tel ochmasdi xozir ochyabdimi?Menda ochmayapti, java uc browserdaman.
0
tahrirlandi ·
NetLizard
#9
Brigand, Попрубуй через другие джава
0
Akbarali
#10
Bu sahifa yuklanishiga tochta o'z ta'sirini ko'rsatadi.
0
gi8ri7
#11
Brigand, # Brigand (28.01.2019 / 14:29)
Temur8818, Menda ochmayapti, java uc browserdaman.Demak bu browserdan
0

#12
Akbarali, # Akbarali (28.01.2019 / 20:45)
Bu sahifa yuklanishiga tochta o'z ta'sirini ko'rsatadi.Nima uchun bunday deyabsiz
0
Akbarali
#13
Master-X, # Master-X (28.01.2019 / 21:19)
Akbarali, Nima uchun bunday deyabsiz https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css bu kodni browser yuklab olishi va kerakli joyga chiqarishi vaqt oladi.
0
24
CHEfan
#14
Mani postimni kim o'chirdi?
0
gi8ri7
#15
CHEfan, # CHEfan (28.01.2019 / 22:26)
Mani postimni kim o'chirdi?Men ba`zi postlarni o'chirgan edim sizning postingiz ham aralashib ketgan ko'rinadi
0
Professor tomonidan tahrirlandi ·

#16
Mana Font Awesome 5.8.1 (Yangilandi: 21-mart 2019)
0
Biriktirilgan fayllar 1
zip1553905390font-awesome.zip5.37 MB · 215 yuklab olingan
Аьзамхон Иномов
#17
uc browserda ochmaydi javalarda faqat
0
gi8ri7
#18
Basic Use


Sizing Icons



Fixed Width Icons



List Icons



Rotate & Flip



Animating Icons



Bordered + Pulled Icons



Stacked Icons
3
Kod · CSS3 qator
<i class="fas fa-stroopwafel"></i>

<span class="fas fa-stroopwafel"></span>
Kod · CSS15 qator
<i class="fas fa-stroopwafel fa-xs"></i>

<i class="fas fa-stroopwafel fa-sm"></i>

<i class="fas fa-stroopwafel fa-lg"></i>

<i class="fas fa-stroopwafel fa-2x"></i>

<i class="fas fa-stroopwafel fa-3x"></i>

<i class="fas fa-stroopwafel fa-5x"></i>

<i class="fas fa-stroopwafel fa-7x"></i>

<i class="fas fa-stroopwafel fa-10x"></i>
Kod · CSS13 qator
<div style="font-size: 2rem;">

  <div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>

  <div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>

  <div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>

  <div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>

  <div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>

</div>
Kod · CSS11 qator
<ul class="fa-ul">

  <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>List icons can</li>

  <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>

  <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>

  <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>

</ul>
Kod · CSS15 qator
<div class="fa-4x">

  <i class="fab fa-font-awesome"></i>

  <i class="fab fa-font-awesome fa-rotate-90"></i>

  <i class="fab fa-font-awesome fa-rotate-180"></i>

  <i class="fab fa-font-awesome fa-rotate-270"></i>

  <i class="fab fa-font-awesome fa-flip-horizontal"></i>

  <i class="fab fa-font-awesome fa-flip-vertical"></i>

</div>
Kod · CSS15 qator
<div class="fa-3x">

  <i class="fas fa-spinner fa-spin"></i>

  <i class="fas fa-circle-notch fa-spin"></i>

  <i class="fas fa-sync fa-spin"></i>

  <i class="fas fa-cog fa-spin"></i>

  <i class="fas fa-spinner fa-pulse"></i>

  <i class="fas fa-stroopwafel fa-spin"></i>

</div>
Kod · CSS7 qator
<i class="fas fa-quote-left fa-2x fa-pull-left"></i>

Gatsby believed in the green light, the orgastic future that year by year recedes before us.

It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...

And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.
Kod · CSS39 qator
<span class="fa-stack fa-2x">

  <i class="fas fa-square fa-stack-2x"></i>

  <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>

</span>

<span class="fa-stack fa-2x">

  <i class="fas fa-circle fa-stack-2x"></i>

  <i class="fas fa-flag fa-stack-1x fa-inverse"></i>

</span>

<span class="fa-stack fa-2x">

  <i class="fas fa-square fa-stack-2x"></i>

  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>

</span>

<span class="fa-stack fa-4x">

  <i class="fas fa-square fa-stack-2x"></i>

  <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>

</span>

<span class="fa-stack fa-2x">

  <i class="fas fa-camera fa-stack-1x"></i>

  <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>

</span>
tahrirlandi ·

#19
Ma'lumotlar kapeli saytidan olindi tanishish va to'liq ma'lumotlar uchun: https://kapeli.com/cheat_sheets/Font_Awesome.docset/Contents/Resources/Documents/index


#18 uchun, Keyngi screenlar ↓↓↓
0
tahrirlandi ·

#20
Vadaga vafo deyishganidek ana sizga surprizuu mana sizga surpriiz ? (bunday deyishimning sababi; chatda Snowden ga hozircha fremworkni Free versiasini ishlatib turaylik iloji boricha tezda Pro versiasini yuklayman degan edim ?)
(60$lik ?) FontAwesome 5.8.1 Pro versiasining yuqoridagi Free versiasidan qanday farqi bor?
Free versia bizga 1,513 iconni taqdim etsa va fa, fab, far teglaridan foydalanilib kelingan bo'lsa
Pro versiasi esa 5,097 icon bilan boyitilgan va fal tegi qo'shilgan

To'liq ma'lumot: https://fontawesome.com/icons?d=gallery
2
Biriktirilgan fayllar 1
zipv581pro.zip707.69 KB · 214 yuklab olingan
tahrirlandi ·
Mavzu moderatori: Professor