Font Awesome sayt grafikasi haqida

3339

Yangi formatda davom etish uchun: https://uzfor.net/47588-font-awesome-sayt-grafikasi-haqida.html

Font Awesome sayt grafikasi haqida

Xabarlar

gi8ri7 [1900] [off]
#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

+ (8): XuSha, Hanov_Dayko, CHEfan, Сирожиддин, Аьзамхон Иномов, beruniy_no1, sobirjonovv, Kamron,

Akbarali [2384] [off]
#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.

+ (4): XuSha, Hanov_Dayko, Сирожиддин, beruniy_no1,

gi8ri7 [1900] [off]
#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>

+ (3): AMIROV, MR_BaxtiyoR, KooL,

Biriktirilgan fayllar [6]:
— img_20190330_063854.jpg (48.81 KB) (791 ↴)
— img_20190330_063921.jpg (36.5 KB) (730 ↴)
— img_20190330_063947.jpg (11.88 KB) (727 ↴)
— img_20190330_064013.jpg (16.16 KB) (727 ↴)
— img_20190330_064149.jpg (19.26 KB) (720 ↴)
— img_20190330_064233.jpg (53.41 KB) (703 ↴)

gi8ri7 [1900] [off]
#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) (161 ↴)
— img_20190330_064255.jpg (20.15 KB) (730 ↴)

gi8ri7 [1900] [off]
#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

+ (2): Сирожиддин, ReSun,

Rahmat aytdi (2): NetLizard, sobirjonovv,

Biriktirilgan fayllar [2]:
— v581pro.zip (707.69 KB) (163 ↴)
— getthumb.jpeg (267.45 KB) (162 ↴)