Font Awesome sayt grafikasi haqida

gi8ri7
#1 17:16:01, 25 Jan 2019

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.

<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

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

Belgilangan o`lcham

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>

Hohlagan o'lchamga keltirish uchun

style="font-size:48px;" 
 
<i class="fa fa-car" style="font-size:48px;"></i>

Rang berish

style="color:red;"
 
<i class="fa fa-car" style="color:red;"></i>

Aylanib turuvchi icon

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

Aylantirish

<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>

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

<div class="menu"><i class="fa fa-car fa-fw"></i>Menu uchun link</div>

// style.css uchun
 
.menu i.fa {
color: #777;
border-radius: 50px;
}

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

0

XuSha
#2 19:04:52, 25 Jan 2019

Master-X, sizni saytingizdagiday sahifani pastiga tushganda TEPAGA dip chiqadiyu shuni qaysi kod orqali qoysam boladi?

0

Akbarali
#3 21:22:24, 25 Jan 2019

XuSha, # XuSha (25.01.2019 / 19:04)
Master-X, sizni saytingizdagiday sahifani pastiga tushganda TEPAGA dip chiqadiyu shuni qaysi kod orqali qoysam boladi?

<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>

.
Juda murakkablashtrib yubordima ?

. tepaga knopkasini oddiy div=id bilan qilsa ham bo'ladi.
.
1000 postim ekan.

0

MR_BaxtiyoR
#4 12:15:32, 27 Jan 2019

Men ham foydalanaman, qulay, va sahifa tezligiga ta'sir qilmaydi

0

NetLizard
#5 18:36:31, 27 Jan 2019

Kimga kerak bolsa yuklab olsin.
Font Awesome v 4.4.0

Biriktirilgan fayllar [1]:
font-awesome.zip (148.98 KB) (140 ↴)

0

Temur8818
#6 22:49:49, 27 Jan 2019

Oldin bu iconkalarni java tel ochmasdi xozir ochyabdimi?

0

gi8ri7
#7 11:29:16, 28 Jan 2019

Temur8818, Font Awesome ochaveradi Bootstrap va Google ochmaydi

0

Brigand
#8 14:29:34, 28 Jan 2019

Temur8818, # Temur8818 (27.01.2019 / 22:49)
Oldin bu iconkalarni java tel ochmasdi xozir ochyabdimi?Menda ochmayapti, java uc browserdaman.

0

NetLizard
#9 15:24:14, 28 Jan 2019

Brigand, Попрубуй через другие джава

0

Akbarali
#10 20:45:48, 28 Jan 2019

Bu sahifa yuklanishiga tochta o'z ta'sirini ko'rsatadi.

0

gi8ri7
#11 21:18:48, 28 Jan 2019

Brigand, # Brigand (28.01.2019 / 14:29)
Temur8818, Menda ochmayapti, java uc browserdaman.Demak bu browserdan

0

gi8ri7
#12 21:19:54, 28 Jan 2019

Akbarali, # Akbarali (28.01.2019 / 20:45)
Bu sahifa yuklanishiga tochta o'z ta'sirini ko'rsatadi.Nima uchun bunday deyabsiz

0

Akbarali
#13 21:22:09, 28 Jan 2019

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

CHEfan
#14 22:26:24, 28 Jan 2019

Mani postimni kim o'chirdi?

0

gi8ri7
#15 13:11:25, 29 Jan 2019

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

gi8ri7
#16 05:22:24, 30 Mar 2019

Mana Font Awesome 5.8.1 (Yangilandi: 21-mart 2019)

Biriktirilgan fayllar [1]:
1553905390font-awesome.zip (5496.72 KB) (101 ↴)

0

Аьзамхон Иномов
#17 05:32:20, 30 Mar 2019

uc browserda ochmaydi javalarda faqat

0

gi8ri7
#18 05:58:27, 30 Mar 2019

Basic Use

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

Sizing Icons

<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>

Fixed Width Icons

<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>

List Icons

<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>

Rotate & Flip

<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>

Animating Icons

<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>

Bordered + Pulled Icons

<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.

Stacked Icons

<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>

Biriktirilgan fayllar [6]:
img_20190330_063854.jpg (48.81 KB) (619 ↴)
img_20190330_063921.jpg (36.5 KB) (596 ↴)
img_20190330_063947.jpg (11.88 KB) (590 ↴)
img_20190330_064013.jpg (16.16 KB) (598 ↴)
img_20190330_064149.jpg (19.26 KB) (589 ↴)
img_20190330_064233.jpg (53.41 KB) (567 ↴)

0

gi8ri7
#19 06:01:46, 30 Mar 2019

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 ↓↓↓

Biriktirilgan fayllar [2]:
1553907720img_20190330_064233.jpg (53.41 KB) (118 ↴)
img_20190330_064255.jpg (20.15 KB) (587 ↴)

0

gi8ri7
#20 18:46:13, 7 Apr 2019

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

Biriktirilgan fayllar [2]:
v581pro.zip (707.69 KB) (115 ↴)
getthumb.jpeg (267.45 KB) (127 ↴)

0

Kunduzi: 17°C

Hozir saytda: 71 onlayn