Font mai ban mamaki 6: cikakken bita
- 1 Yadda zaka Sanya Font mai ban tsoro
- Hanyar 1.
- Hanyar 2.
- 2 Yadda zaka Yi Amfani da Font mai ban sha'awa
- 1 gumakan daidaitattun gumakan
- 2 manyan gumaka
- 3 Gyara gumakan nesa
- 4 gumaka don jera jerin
- 5 gumakan da aka tsara
- 6 gumakan raye
- 7 gumakan canza rubutu
- 8 gumakan hade
- 3 Font Awesome 4.5.0 collection, classes dacss code to insert using the content property
- Albarkatun da ke da alaƙa 4
- Girman icon
- Launi mai launi
- Tambayoyi Akai-Akai
Font mai ban tsoro shine tarin sikelin vector. Ana iya tsara gumakan amfani da kaddarorin CSS, saita launi, girma, inuwa da ƙari. Shafin 5.5.0 ya ƙunshi gumakan 605.
1 Yadda zaka Sanya Font mai ban tsoro
Hanyar 1.
Yi amfani da sigar Font-Awesome.css version na fayil ta ƙara lambar masu zuwa ga<head> sashe:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Da zarar an haɗa font ɗin, zaku iya amfani da gumakan a shafinku.
Hanyar 2.
Zazzage font daga font mai ban tsoro . Cire kayan adana da loda manyan fayiloli biyu daga kayan tarihin zuwa uwar garken Yanar - CSS da Fonts. Idan kun riga kun sami manyan fayiloli tare da irin waɗannan sunaye, to kuna buƙatar kawai ƙara fayiloli daga manyan fayilolin da aka sauke su.
Kuna iya amfani da cikakken ƙarfin fayil ɗin:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Yadda zaka Yi Amfani da Font mai ban sha'awa
Ana iya ƙara gumakan zuwa shafin yanar gizo a cikin hanyoyi biyu: ta hanyar saita azuzuwan da suka dace don<i> da<span> elements, koby adding them to the desired element using the :before, :after pseudo-elements dathe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: Kafin {abun ciki: "\ F015"; / * Sanya alamar gida * / font-iyali: font-dangi: gefe: #aaaaaa.1 gumakan daidaitattun gumakan
Font mai ban tsoro an tsara shi don amfani dashi tare da abubuwan takaici. Don ƙara gumaka, ku farko kuna buƙatar saita aji na FA zuwa<i> ko<span> kashi.
Don ƙara alamar da aka zaɓa kafin ko bayan kashi, komai<i></i> ko<span></span> Edeme an ƙara zuwa ga kashi, wanda aka sanya a cikin wani gunki na gunki, kazalika da ƙarin aji wanda yake shimfida salo.
<i class="fa fa-camera-retro"></i>2 manyan gumaka
Don haɓaka girman dangi na gunki zuwa ganga, yi amfani da FA-LG (33% haɓaka), FA-2X, FA-3X, FA-4X, azuzuwan Fa-5x, Fa-4x, azuzuwan Fa-5x.
<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 Gyara gumakan nesa
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation kolists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Gida</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Leburare</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Aikace-aikace</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Saitunan</a ></li></ul>4 gumaka don jera jerin
Yi amfani da azuziyar clan na Ul da Li-Li-Li-Li-Liza don maye gurbin tsoffin harsasai a<ul>...</ul> da aka bayar.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>jerin abubuwa</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>jerin abubuwa</li> <li><i class="fa-li fa fa-square"></i>jerin abubuwa</li></ul>5 gumakan da aka tsara
Use the fa-border class to set the border for the icon. The pull-right dapull-left classes will add quotes to the text.
<p><i class="fa fa-quote-left fa-3x pull-left fa-border"></i>Dollor Dolor ya zauna amet, a jeri maidodin elit. NIANC SOC Furus Consus, Pielue Libero a, Porta SPIEN. A cikin leken asiri lekuna. SEACUS ELIT, SEMper Vitae Feliis ID, Sodales Conc Concue Concue.</p>6 gumakan raye
Sanya FA-Snese, bugun FA-bugun, FA-Regresh, azuzuwan FA-COG don kafa gumakan kayan fata. Ba a tallafawa tashin hankali a cikin IE8 - IE9.
<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>7 gumakan canza rubutu
Don juyawa ko alamun flip, yi amfani da facina na juyawa- * da FA-Class- * azuzuwan.
<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 gumakan hade
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, dafa-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 dacss code to insert using the content property
Gumaka don aikace-aikacen Yanar gizo FA-daidaitawa - \ F042;FACHOR - \ F13D;
FACHICIVE - \ F187;
FA-arrows - \ F047;
FA-asterisk - \ F069;
Faat - \ f1fa;
FA-daidaitaccen-sikelin - \ f24e;
FA Ban - \ F05e;
FA-Bankin - \ F19C;
FA-Barcode - \ F02A;
FA-baturi - komai - \ f244;
FA-baturi-rabi - \ F242;
FA-batul-kwata - \ F243;
FA-batura-kwata-uku - \ F241;
FA-bator-Cikakken - \ F240;
FA-ble - \ F236;
FA-giya - \ F0FC;
FA-Bell - \ F0f3;
FA-Bell-Slash - \ F1f6;
FA-binoculars - \ f1e5;
- ranar haihuwa-cake - \ f1fd;
FA-Bolt - \ F0e7;
FA-bam - \ f1e2;
Littafin FA-- \ F02D;
Don juyawa ko alamun flip, yi amfani da facina na juyawa- * da FA-Class- * azuzuwan.
Albarkatun da ke da alaƙa 4
Baya ga tarin font mai ban tsoro, zaka iya amfani da sauran fonts kuma.
Fontello.%%%% Fontello %% yana da babban tarin tarin ices daban-daban. Kuna iya zaɓar gumakan da kuke so tare da saukar da su zuwa kwamfutarka.
Ikon Gidaje., harsashin kafa Shin, wata icon font font daga masu haɓakar tsarin kafuwar. Baya ga daidaitattun gumakan, kayan aikin suna siffofin zagaye zagaye gumaka, gumakan kafofin watsa labarun, da ƙari.
Gumakan Kayan Aiki.Gumakan Media sune gumakan da aka haɗa Google wanda ke haɗuwa da tsinkaye. Ana inganta gumakan don kyakkyawan nuni akan duk dandamali na gama gari kuma ga duk shawarwarin allo.
Taron font ya ƙunshi gumakan 750+. Hanya mafi sauki don shigar da tarin akan gidan yanar gizonku shine amfani da gumaka kamar fonts ɗin Google. Don yin wannan, an haɗa lambar mai zuwa a cikin shafin shafi:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Don daidai nuna font a cikin masu bincike, ƙayyadaddun wanda zai yi amfani da alamar font ɗin abubuwa - gumakan aji:
. Alamar-Gumaka font-nauyi: al'ada font-style: al'ada font-girman: 24px; / * Girman icon * / nuni: inline-toshe; nisa: 1em; tsawo: 1em; layin-tsayi: 1; Rubutun rubutu: Babu; harafin-spacing: kalmar sirri ta al'ada: al'ada; White-sarari: whitera; shugabanci: LTR; -Webkit-font-smoothing: Antialanied; / * Gaba ɗaya masu binciken yanar gizo * / Text-Reending: Ingantaccen inganci; / * Safari da Chrome goyon baya * / -Moz-osx-font-slothing: grayycale; / * Tallafin Firefox. * / font-fasali-saitunan: 'Laga'; / * IE Tallafawa. * /}Gumarin da kansu an kara amfani da su<I class=''material-gumaka''>Ligature ko lambar HTML na gunkin</i> Tag, alal misali:
<i class="material-gumaka">Account_Balanne_Wallet</i><i class="material-gumaka"></i>Duk masu binciken na zamani suna fahimtar cewa, watau - fara daga ta atomatik, saboda wannan kuna buƙatar sauke-danna kan hoton alamar da kwafar da aka ba da shawarar.
Girman icon
Girman icon is controlled by additional classes:
Alamomin-Alamomin-Alamomin.md-18 {Font-Girma: 18px;} / * don<i class="material-gumaka md-18"></i> * /alamomi-duka.my-24 {font-girma: 24px;} / * don<i class="material-gumaka md-24"></i> * /.mamara-gumakan-alamomi.md-36 {font-girma: 32px;} / * don<i class="material-gumaka md-36"></i> * /. Alamomin -ididdigar-Alamomin.md-48 {font-girma: 48px;} / * don<i class="material-gumaka md-48"></i> * /Launi mai launi
Ana kuma saita launi na gumakan amfani da ƙarin azuzuwan:
.<i class="material-gumaka md-dark"></i> * /. Alamomin-ICons.md-haske {launi: RGBA (255, 255, 255, 255, 25);} / *<i class="material-gumaka md-light"></i> * /. Alamomin -ididdigar-ICons.md-duhu.md-m<i class="material-gumaka md-dark md-inactive"></i> * /.mamara-duka gumaka.md-haske.md-m {Launi: RGBA (255, 255, 255, 25);} / *<i class="material-gumaka md-light md-inactive">fuska</i> * /Don saita launi na al'ada, kuna buƙatar ƙara aji wanda ke ba da ma'anar launi na gunkin, misali:
alamomin-alamara.indigo {launi: # 1a237e;} / *<i class="material-gumaka indigo"></i> * /Tambayoyi Akai-Akai
- Menene font mai ban tsoro a cikin sauki sharuddan?
- Ainihin, lamari ne da ke da alamomi waɗanda za a iya ƙara su zuwa kowane shafin yanar gizon don haɓaka ganawar ta. Tarin ya ƙunshi gumakan ɗari waɗanda suka dace da kowane aiki da manufa.Informationarin bayani kan wannan hanyar haɗin
Michel Pinson ne mai sha'awar tafiya da Mahaliccin abun ciki. Rashin tausayi don ilimi da bincike, ya tuba don raba ilimi da kuma fahimtar wasu ta hanyar ɗaukar abubuwan ilimi. Kawo Duniya kusa da karfafawa mutane da karfin hali tare da kwarewar duniya da kuma irin yawo.
