Shrift ajoyib 6: to'liq sharh
- 1 shrift ajoyibligini qanday o'rnatish kerak
- 1-usul.
- 2-usul.
- 2 Shrift ajoyib piktogrammalaridan qanday foydalanish mumkin
- 1 standart piktogrammalar
- 2 ta katta piktogramma
- 3 STRIFA KIMINI ICONE
- Bull ro'yxatiga 4 ta piktogrammalar
- 5 ta joylashtirilgan piktogrammalar va tirnoq
- 6 animatsion piktogrammalar
- Tiriklangan piktogrammalar
- 8 qo'shilish piktogrammasi
- 3 Font Awesome 4.5.0 collection, classes vacss code to insert using the content property
- 4 Tegishli resurslar
- Belgi hajmi
- Belgi rangi
- Tez-Tez Beriladigan Savollar
Shrift ajoyib - bu mas'ul vektorli piktogramma to'plami. Belgilar CSS xususiyatlari yordamida formatlash mumkin, ularning ranglarini, o'lchamlarini, soyalarini va boshqa ko'p narsalarni o'rnating. Shriftning 5.5.0 versiyasi 605 piktogrammalarni o'z ichiga oladi.
1 shrift ajoyibligini qanday o'rnatish kerak
1-usul.
Quyidagi kodni qo'shib faylning shrift-awese.cs versiyasidan foydalaning<head> Bo'lim:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Shrift ulangandan so'ng, siz belgilangan piktogrammalardan foydalanishingiz mumkin.
2-usul.
Shriftni Font Ajree Arxivni oching va arxivdan ikkita papkani sayt serveri - CSS va shriftlarga yuklang. Agar siz allaqachon sizning saytingizda bunday nomlar bilan papkalar mavjud bo'lsa, unda siz shunchaki yuklab olingan papkalardan fayllarni qo'shishingiz kerak.
Siz faylning to'liq yoki minimallashtirilgan versiyasidan foydalanishingiz mumkin:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Shrift ajoyib piktogrammalaridan qanday foydalanish mumkin
Belgilar veb-sahifaga ikki usulda qo'shilishi mumkin: tegishli sinflarni belgilash orqali<i> va<span> elements, yokiby adding them to the desired element using the :before, :after pseudo-elements vathe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> {Mon oldin: "\ F015"; / * Uy sahifasi tasvirchasi.1 standart piktogrammalar
Shrift ajoyib elementlar bilan ishlash uchun mo'ljallangan. Belgilarni qo'shish uchun siz avval FA sinfini belgilashingiz kerak<i> yoki<span> element.
Elementni yoki undan keyin tanlangan ikonkani qo'shish uchun bo'sh<i></i> yoki<span></span> Element elementga belgilanadigan elementga elementlar, shuningdek, stylingni uzaytiradigan qo'shimcha sinf.
<i class="fa fa-camera-retro"></i>2 ta katta piktogramma
Ichki idishga nisbatan belkurak hajmini oshirish uchun FA-LG (33% o'sishi), FA-2X, FA-IX, FA-5X sinflari.
<i class="fa fa-camera-retro fa-lg"></i> <i class="fa fa-camera-retro fa-2x"></i> <i class="fa fa-camera- retro fa-3x"></i> <i class="fa fa-camera-retro fa-4x"></i> <i class="fa fa-camera-retro fa-5x"></i>3 STRIFA KIMINI ICONE
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation yokilists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Uy</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Kutubxona</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Arizalar</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Sozlash</a ></li></ul>Bull ro'yxatiga 4 ta piktogrammalar
A-da standart o'qlarni almashtirish uchun FA-ul va FA-LI sinflaridan foydalaning<ul>...</ul> byulli ro'yxat.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Ro'yxatli element</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Ro'yxatli element</li> <li><i class="fa-li fa fa-square"></i>Ro'yxatli element</li></ul>5 ta joylashtirilgan piktogrammalar va tirnoq
Use the fa-border class to set the border for the icon. The pull-right vapull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Lorem Ipsum Dolor Sayt Amet, konsultet elit. Doncec nugurt paspi, Pozere Libero, Porta Sapen. Sed elit lektusida. Sed Lakus Elit, semper Vitana felis identifikatori, sodales Codaes Cauoles.</p>6 animatsion piktogrammalar
FA-SPIN, FA-pulse, Fa-Pulse, yangilanish, FA-COGLAR SHIPINI ISMOQINI EMASINI QO'ShIMChA. IE8 - IE9 da animatsiya qo'llab-quvvatlanmaydi.
<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>Tiriklangan piktogrammalar
Belgilash yoki piktogrammalarni aylantirish, FA-RATATE- * va FLAT- * darslaridan foydalaning.
<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>8 qo'shilish piktogrammasi
You can combine icons by overlaying one on top of the other. Use the fa-stack class for the parent icon, the fa-stack-1x class for the standard size, vafa-stack-2x for the enlarged size.
<span class="fa-stack fa-lg"> <i class="fa fa-square-o fa-stack-2x"></i> <i class="fa fa-twitter fa-stack-1x" ></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-circle fa-stack-2x"></i> <i class="fa fa-flag fa-stack-1x fa-inverse "></i></span> <span class="fa-stack fa-lg"> <i class="fa fa-square fa-stack-2x"></i> <i class="fa fa-terminal fa-stack-1x fa-inverse "></i></span> <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 "></i></span>3 Font Awesome 4.5.0 collection, classes vacss code to insert using the content property
Veb-ilovalar uchun piktogrammalar FA-RASS - \ F042;FA-LACHOR - \ F13D;
FA-arxiv - \ F187;
FA-strelkalar - \ F047;
FA-Asterisk - \ F069;
Famat - \ f1fa;
FA-Balans-shkala - \ F24E;
FA-BAN - \ F05E;
FA-BANK - \ F19C;
Fa-shtrix - \ F02a;
Batareya - bo'sh - \ f244;
Batareyasi - yarim \ f242;
FA-Batareya-starti-chorak - \ F243;
FA-Batareya-uch chorak - \ F241;
FA-Batareya-to'liq - \ F240;
FA-TUMAT - \ F236;
FA-PERER - \ F0FC;
FA-Bell - \ F0F3;
Bell-Slash - \ F1F6;
FA-Binokok - \ F1E5;
FA-Tug'ilgan kun - \ f1fd;
FA-Bolt - \ F0E7;
Bomba - \ F1E2;
FA-kitob - \ F02d;
Belgilash yoki piktogrammalarni aylantirish, FA-RATATE- * va FLAT- * darslaridan foydalaning.
4 Tegishli resurslar
Shrift ajoyib to'plamiga qo'shimcha ravishda siz boshqa shriftlardan ham foydalanishingiz mumkin.
Fontello.Fontello har xil o'lchamdagi shriftlarning katta to'plamiga ega. Siz o'zingiz yoqtirgan piktogrammalarni tanlashingiz va kompyuteringizga yuklab olishingiz mumkin.
Jamg'arma belgisi.%% Asosli folight belgisi - bu poydevor dasturi ishlab chiqaruvchilaridan shriftning yana bir to'plamidir. Standart piktogrammalarga qo'shimcha ravishda, saytda dumaloq piktogramma, ijtimoiy media piktogrammalari va boshqa narsalar mavjud.
Moddiy piktogrammalar.Moddiy piktogramma - bu googrammaning yagona fikricha piktogrammasi bo'lib, idrokni engillashtiradi. Belgilar barcha umumiy platformalar va barcha ekranli qarorlar uchun chiroyli displey uchun optimallashtirilgan.
Belgi shrift to'plamida 750+ belgini o'z ichiga oladi. Sizning veb-saytingizda to'plamni o'rnatishning eng oson usuli - Google veb-shriftlari kabi tasvirlardan foydalanish. Buning uchun quyidagi kod sahifani belgilaydi:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Brauzerlarda shriftni to'g'ri namoyish qilish uchun, shriftdan foydalanadigan element, shriftning moddiy-ikonkalar sinfi keltirilgan:
.Meni-piktogramma {shrift-oila: "Moddiy piktogrammalar"; Shriftni og'irlik: normal shrift uslubi: normal shrift o'lchami: 24px; / * Afzal ko'rilgan ikonkaning o'lchami * / displey: ichki blok; Kengligi: 1em; Balandligi: 1em; satr balandligi: 1; Matnni o'zgartirish: yo'q; Xat-limping: normal so'z-o'rash: normal; Oq fazoviy: yangi; Yo'nalish: lt; -webkit-shrift-tekislash: antiiyased; / * Barcha veb-brauzerlar tomonidan qo'llab-quvvatlanadi * / Tent-Yordam: Optimizitelate / * Safari va Chrome-ni qo'llab-quvvatlash * / -Moz-OSX-Font-Seeving: kulrangale; / * Firefox-ni qo'llab-quvvatlash. * / shrift - xususiyatlari-sozlamalari: 'liga'; / * Ya'ni qo'llab-quvvatlash. * /}Pikkalarning o'zlari ular yordamida qo'shiladi<I class=''material-piktogramma''>Belge yoki HTML kodeksi</i> Teg, masalan:
<i class="material-piktogramma">Hisob_balece_wallet</i><i class="material-piktogramma">Shum</i>Ligate barcha zamonaviy brauzerlar tushuniladi, ya'ni - versiyadan boshlab 10-chi
Belgi hajmi
Belgi hajmi is controlled by additional classes:
.Ma'lummat-piktogramma.md-18 {frift o'lchami: 18px;} / * uchun<i class="material-piktogramma md-18"></i> * /.Ma'lummat-piktogramma.md-24 {frift o'lchami: 24px;} / * uchun<i class="material-piktogramma md-24"></i> * /.Mamator-piktogramma.md-36 {frift o'lchami: 36px;} / * uchun<i class="material-piktogramma md-36"></i> * /.Ma'lummat-piktogramma.md-48 {shrift-o'lchamlari: 48px;} / * uchun<i class="material-piktogramma md-48"></i> * /Belgi rangi
Belgilarning rangi ham qo'shimcha sinflardan foydalangan holda o'rnatiladi:
.MD-Dark {RGBA (0, 0, 0, 0,54);} / *<i class="material-piktogramma md-dark"></i> * /.MD-Light {RGBA (255, 255, 255, 1);} / *<i class="material-piktogramma md-light"></i> * /.MD-Dardon.MD-Faol emas {RGBA (0, 0, 0, 0,26);} / *<i class="material-piktogramma md-dark md-inactive"></i> * /.MD-Light.MD-faol bo'lmagan {RGBA (255, 255, 255, 0,3, 0,3);} / *<i class="material-piktogramma md-light md-inactive">yuzma-yuz</i> * /Maxsus rangni o'rnatish uchun siz ikonkaning rangini belgilaydigan sinfni qo'shishingiz kerak, masalan:
.Mumbogo {Rang: # 1A237E;} / *<i class="material-piktogramma indigo"></i> * /Tez-Tez Beriladigan Savollar
- Oddiy ma'noda shrift nima?
- Aslida, bu uning ko'rinishi va dizaynini kuchaytirish uchun har qanday veb-to'plamga qo'shilishi mumkin bo'lgan piktogrammalar bilan shrift. To'plam har qanday vazifa va maqsadga muvofiq bir necha yuz piktogrammadan iborat.Ushbu havola haqida ko'proq ma'lumot
