UZFOR
  1. DARSLAR VA MAQOLALAR
  2. AKT bo'yicha darslar va maqolalar
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.

  1. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">


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

  1. <i class="fa fa-car"></i>


Belgilangan o`lcham 
  1. fa-fw fa-lg fa-2x fa-3x fa-4x fa-5x 
  2.  
  3. <i class="fa fa-car fa-fw"></i>
  4. <i class="fa fa-car fa-lg"></i>
  5. <i class="fa fa-car fa-2x"></i>
  6. <i class="fa fa-car fa-3x"></i>
  7. <i class="fa fa-car fa-4x"></i>
  8. <i class="fa fa-car fa-5x"></i>


Hohlagan o'lchamga keltirish uchun
  1. style="font-size:48px;" 
  2.  
  3. <i class="fa fa-car" style="font-size:48px;"></i>


Rang berish 
  1. style="color:red;"
  2.  
  3. <i class="fa fa-car" style="color:red;"></i>


Aylanib turuvchi icon 
  1. fa-spin
  2.  
  3. <i class="fa fa-spinner fa-spin"></i>


Aylantirish 

  1. <i class="fa fa-car"></i>
  2. <i class="fa fa-car fa-rotate-90"></i>
  3. <i class="fa fa-car fa-rotate-180"></i>
  4. <i class="fa fa-car fa-rotate-270"></i>
  5. <i class="fa fa-car fa-flip-horizontal"></i>
  6. <i class="fa fa-car fa-flip-vertical"></i>


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
  1. <div class="menu"><i class="fa fa-car fa-fw"></i>Menu uchun link</div>

  1. // style.css uchun
  2.  
  3. .menu i.fa {
  4. color: #777;
  5. border-radius: 50px;
  6. }


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
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?
  1. <script type="text/jаvаsсriрt" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  2. <script type="text/jаvаsсriрt">
  3. $(function() {
  4. $.fn.scrollToTop = function() {
  5. $(this).hide().removeAttr("href");
  6. if ($(window).scrollTop() >= "250") $(this).fadeIn("slow")
  7. var scrollDiv = $(this);
  8. $(window).scroll(function() {
  9. if ($(window).scrollTop() <= "250") $(scrollDiv).fadeOut("slow")
  10. else $(scrollDiv).fadeIn("slow")
  11. });
  12. $(this).click(function() {
  13. $("html, body").animate({scrollTop: 0}, "slow")
  14. })
  15. }
  16. });
  17. $(function() {
  18. $("#Go_Top").scrollToTop();
  19. });
  20. </script>
  21. <a style="position: fixed; bottom: 25px; right: 1px; cursor: pointer; display: block;" id="Go_Top">
  22. <img src=" https://saytuz.ru/gotop.png alt="Наверх" title="Yuqoriga" width="50px"></a>

.
Juda murakkablashtrib yubordima ? . tepaga knopkasini oddiy div=id bilan qilsa ham bo'ladi.
.
1000 postim ekan.
4
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 · 223 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 · 196 yuklab olingan
Аьзамхон Иномов
#17
uc browserda ochmaydi javalarda faqat
0
gi8ri7
#18
Basic Use
  1. <i class="fas fa-stroopwafel"></i>
  2. <span class="fas fa-stroopwafel"></span>


Sizing Icons

  1. <i class="fas fa-stroopwafel fa-xs"></i>
  2. <i class="fas fa-stroopwafel fa-sm"></i>
  3. <i class="fas fa-stroopwafel fa-lg"></i>
  4. <i class="fas fa-stroopwafel fa-2x"></i>
  5. <i class="fas fa-stroopwafel fa-3x"></i>
  6. <i class="fas fa-stroopwafel fa-5x"></i>
  7. <i class="fas fa-stroopwafel fa-7x"></i>
  8. <i class="fas fa-stroopwafel fa-10x"></i>


Fixed Width Icons

  1. <div style="font-size: 2rem;">
  2.   <div><i class="fas fa-home fa-fw" style="background:MistyRose"></i> Home</div>
  3.   <div><i class="fas fa-info fa-fw" style="background:MistyRose"></i> Info</div>
  4.   <div><i class="fas fa-book fa-fw" style="background:MistyRose"></i> Library</div>
  5.   <div><i class="fas fa-pencil-alt fa-fw" style="background:MistyRose"></i> Applications</div>
  6.   <div><i class="fas fa-cog fa-fw" style="background:MistyRose"></i> Settings</div>
  7. </div>


List Icons

  1. <ul class="fa-ul">
  2.   <li><span class="fa-li" ><i class="fas fa-check-square"></i></span>List icons can</li>
  3.   <li><span class="fa-li"><i class="fas fa-check-square"></i></span>be used to</li>
  4.   <li><span class="fa-li"><i class="fas fa-spinner fa-pulse"></i></span>replace bullets</li>
  5.   <li><span class="fa-li"><i class="far fa-square"></i></span>in lists</li>
  6. </ul>


Rotate & Flip

  1. <div class="fa-4x">
  2.   <i class="fab fa-font-awesome"></i>
  3.   <i class="fab fa-font-awesome fa-rotate-90"></i>
  4.   <i class="fab fa-font-awesome fa-rotate-180"></i>
  5.   <i class="fab fa-font-awesome fa-rotate-270"></i>
  6.   <i class="fab fa-font-awesome fa-flip-horizontal"></i>
  7.   <i class="fab fa-font-awesome fa-flip-vertical"></i>
  8. </div>


Animating Icons

  1. <div class="fa-3x">
  2.   <i class="fas fa-spinner fa-spin"></i>
  3.   <i class="fas fa-circle-notch fa-spin"></i>
  4.   <i class="fas fa-sync fa-spin"></i>
  5.   <i class="fas fa-cog fa-spin"></i>
  6.   <i class="fas fa-spinner fa-pulse"></i>
  7.   <i class="fas fa-stroopwafel fa-spin"></i>
  8. </div>


Bordered + Pulled Icons

  1. <i class="fas fa-quote-left fa-2x fa-pull-left"></i>
  2. Gatsby believed in the green light, the orgastic future that year by year recedes before us.
  3. It eluded us then, but that’s no matter — tomorrow we will run faster, stretch our arms further...
  4. And one fine morning — So we beat on, boats against the current, borne back ceaselessly into the past.


Stacked Icons

  1. <span class="fa-stack fa-2x">
  2.   <i class="fas fa-square fa-stack-2x"></i>
  3.   <i class="fab fa-twitter fa-stack-1x fa-inverse"></i>
  4. </span>
  5. <span class="fa-stack fa-2x">
  6.   <i class="fas fa-circle fa-stack-2x"></i>
  7.   <i class="fas fa-flag fa-stack-1x fa-inverse"></i>
  8. </span>
  9. <span class="fa-stack fa-2x">
  10.   <i class="fas fa-square fa-stack-2x"></i>
  11.   <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
  12. </span>
  13. <span class="fa-stack fa-4x">
  14.   <i class="fas fa-square fa-stack-2x"></i>
  15.   <i class="fas fa-terminal fa-stack-1x fa-inverse"></i>
  16. </span>
  17. <span class="fa-stack fa-2x">
  18.   <i class="fas fa-camera fa-stack-1x"></i>
  19.   <i class="fas fa-ban fa-stack-2x" style="color:Tomato"></i>
  20. </span>
3
Biriktirilgan fayllar 6
img_20190330_063854.jpg48.81 KB · 771 yuklab olinganimg_20190330_063921.jpg36.5 KB · 709 yuklab olinganimg_20190330_063947.jpg11.88 KB · 726 yuklab olinganimg_20190330_064013.jpg16.16 KB · 735 yuklab olinganimg_20190330_064149.jpg19.26 KB · 723 yuklab olinganimg_20190330_064233.jpg53.41 KB · 704 yuklab olingan
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
Biriktirilgan fayllar 2
1553907720img_20190330_064233.jpg53.41 KB · 233 yuklab olinganimg_20190330_064255.jpg20.15 KB · 728 yuklab olingan
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 2
zipv581pro.zip707.69 KB · 200 yuklab olingangetthumb.jpeg267.45 KB · 249 yuklab olingan
tahrirlandi ·
Mavzu moderatori: Professor