Font Awesome 6: volledige resensie
- 1 Hoe om lettertipe AWESOME te installeer
- Metode 1.
- Metode 2.
- 2 Hoe om Font Awesome Icons te gebruik
- 1 Standaardikone
- 2 groot ikone
- 3 Vaste breedte -ikone
- 4 ikone vir koeëllys
- 5 geraamde ikone en aanhalings
- 6 geanimeerde ikone
- 7 getransformeerde ikone
- 8 Kombinasie -ikone
- 3 Font Awesome 4.5.0 collection, classes encss code to insert using the content property
- 4 verwante hulpbronne
- Ikoongrootte
- Ikoon kleur
- Gereeld Gevra Vrae
Font Awesome is 'n versameling skaalbare vektorikone. Ikone kan met behulp van CSS -eienskappe geformateer word, hul kleur, grootte, skaduwee en nog baie meer instel. Font weergawe 5.5.0 bevat 605 ikone.
1 Hoe om lettertipe AWESOME te installeer
Metode 1.
Gebruik die font-awome.css-weergawe van die lêer deur die volgende kode by die<head> Afdeling:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Sodra die lettertipe gekoppel is, kan u die ikone op u webwerf gebruik.
Metode 2.
Laai die lettertipe af van font awesome . Pak die argief uit en laai twee gidse vanaf die argief na die webwerfbediener - CSS en lettertipes. As u reeds vouers met sulke name op u webwerf het, moet u net lêers van die afgelaaide vouers by hulle voeg.
U kan die volledige of geminifiseerde weergawe van die lêer gebruik:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Hoe om Font Awesome Icons te gebruik
Ikone kan op twee maniere op 'n webblad gevoeg word: deur die toepaslike klasse vir die<i> en<span> elements, ofby adding them to the desired element using the :before, :after pseudo-elements enthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: voor {inhoud: "\ f015";/ * Voeg tuis-ikoon by */font-familie: fontaWesome; kleur: #aaaaaa; margin-regs: 10px;}1 Standaardikone
Font Awesome is ontwerp om met inline -elemente gebruik te word. Om ikone by te voeg, moet u eers die FA -klas op die<i> of<span> element.
Om die geselekteerde ikoon voor of na die element by te voeg, 'n leë<i></i> of<span></span> Die element word bygevoeg aan die element, wat 'n ikoonklas toegeken het, sowel as 'n addisionele klas wat die stilering uitbrei.
<i class="fa fa-camera-retro"></i>2 groot ikone
Gebruik die FA-LG (33% toename), FA-2x, FA-3X, FA-4X, FA-5X klasse om die grootte van 'n ikoon relatief tot die houer te vergroot.
<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 Vaste breedte -ikone
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation oflists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Tuiste</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Biblioteek</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Aansoeke</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Instellings</a ></li></ul>4 ikone vir koeëllys
Gebruik die FA-ul- en FA-LI-klasse om die standaardkoeëls in 'n<ul>...</ul> Bulleted lys.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Lysitem</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Lysitem</li> <li><i class="fa-li fa fa-square"></i>Lysitem</li></ul>5 geraamde ikone en aanhalings
Use the fa-border class to set the border for the icon. The pull-right enpull-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 sit amet, consctetur adipiscing elit. Donec nec Purus Congue, Posuere Libero in, Porta Sapien. In sed elit lektus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 geanimeerde ikone
Voeg die FA-spin, FA-Pulse, FA-Refresh, FA-COG-klasse by om spin-ikone op te stel. Animasie word nie in IE8 - IE9 ondersteun nie.
<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 getransformeerde ikone
Gebruik die fa-rotte-* en fa-flip-* klasse om ikone te draai of flip.
<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 Kombinasie -ikone
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, enfa-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 encss code to insert using the content property
Ikone vir webtoepassings Fa -verstel - \ f042;Fa -anker - \ f13d;
Fa -Archive - \ F187;
Fa -pyle - \ f047;
Fa -meesterk - \ f069;
FAAT - \ f1fa;
Fa-balansskaal-\ F24e;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
Fa -barcode - \ f02a;
Fa-battery-leë-\ f244;
Fa-Battery-Half-\ F242;
Fa-Battery-Quarter-\ F243;
Fa-battery-drie-kwartiere-\ F241;
Fa-battery-vol-\ f240;
Fa -bed - \ f236;
Fa -beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-Bell-Slash-\ F1f6;
Fa -binoculars - \ f1e5;
Fa-Birthday-Cake-\ F1fd;
Fa -bout - \ f0e7;
Fa -bom - \ f1e2;
FA -boek - \ F02D;
Gebruik die fa-rotte-* en fa-flip-* klasse om ikone te draai of flip.
4 verwante hulpbronne
Benewens die Font Awesome Collection, kan u ook ander ikoon -lettertipes gebruik.
Fontello.Fontello het 'n groot versameling verskillende ikoon -lettertipes. U kan die ikone wat u wil kies en dit op u rekenaar aflaai.
Stigting -ikoon.Foundation Icon is 'n ander ikoon -lettertipe -versameling van die ontwikkelaars van die Foundation Framework. Benewens standaard -ikone, bevat die webwerf ronde ikone, sosiale media -ikone en meer.
Materiële ikone.Materiële ikone is Google se verenigde plat ikone wat gemak van persepsie beliggaam. Ikone is geoptimaliseer vir 'n pragtige vertoning op alle gewone platforms en vir alle skermoplossings.
Die Icon Font -versameling bevat 750+ ikone. Die maklikste manier om 'n versameling op u webwerf te installeereer, is om ikone soos Google Web -lettertipes te gebruik. Om dit te kan doen, is die volgende kode in die bladsy -opmerking ingesluit:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Om die lettertipe in blaaiers korrek te vertoon, kry die element wat die ikoon-lettertipe gebruik, die materiaal-ikone-klas:
.materiaal-ikone {font-Family: 'Material Icons'; lettertipe: normale lettertipe-styl: normale lettertipe: 24px; / * Voorkeur-ikoongrootte */ vertoon: inline-blok; breedte: 1em; Hoogte: 1em; lynhoogte: 1; Teks-transform: Geen; Letter-spating: Normale woord-wrap: normaal; Witruimte: Nowrap; Rigting: LTR; -Webkit-Font-Smoothing: antialiased; / * Ondersteun deur alle WebKit-blaaiers */ teksverlening: Optimizelegibility; / * Safari en Chrome Ondersteuning */ -Moz-OSX-Font-Smoothing: Grayscale; /* Firefox -ondersteuning. */ font-feature settings: 'liga'; /* IE ondersteuning. */}Die ikone self word bygevoeg met behulp van die<I class=''material-ikone''>Ligatuur of HTML -kode van die ikoon</i> Tag, byvoorbeeld:
<i class="material-ikone">rekening_balance_wallet</i><i class="material-ikone"></i>Die ligatuur word verstaan deur alle moderne blaaiers, dit wil sê - vanaf weergawe 10. Die ikoonkode word outomaties gegenereer, want hiervoor moet u op die ikoonbeeld klik en die voorgestelde voorkoms kopieer.
Ikoongrootte
Ikoongrootte is controlled by additional classes:
.materiaal-ikone.md-18 {lettergrootte: 18px;} /* vir<i class="material-ikone md-18"></i> */.materiaal-ikone.md-24 {lettergrootte: 24px;} /* vir<i class="material-ikone md-24"></i> */.materiaal-ikone.md-36 {lettergrootte: 36px;} /* vir<i class="material-ikone md-36"></i> */.materiaal-ikone.md-48 {lettergrootte: 48px;} /* vir<i class="material-ikone md-48"></i> */Ikoon kleur
Die kleur van die ikone word ook met addisionele klasse gestel:
.materiaal-ikone.md-dark {kleur: rgba (0, 0, 0, 0.54);} /*<i class="material-ikone md-dark"></i> */.materiaal-ikone.md-lig {kleur: rgba (255, 255, 255, 1);} /*<i class="material-ikone md-light"></i> */.materiaal-ikone.md-dark.md-inaktief {kleur: rgba (0, 0, 0, 0.26);} /*<i class="material-ikone md-dark md-inactive"></i> * /.materiaal-ikone.md-lig.md-onaktief {kleur: rgba (255, 255, 255, 0.3);} /*<i class="material-ikone md-light md-inactive">gesig</i> */Om 'n pasgemaakte kleur in te stel, moet u 'n klas byvoeg wat die kleur van die ikoon definieer, byvoorbeeld:
.materiaal-ikone.indigo {kleur: #1a237e;} /*<i class="material-ikone indigo"></i> */Gereeld Gevra Vrae
- Wat is Font Awesome in eenvoudige terme?
- In wese is dit 'n lettertipe met ikone wat by enige webbladelement gevoeg kan word om die sigbaarheid en ontwerp daarvan te verbeter. Die versameling bestaan uit etlike honderde ikone wat geskik is vir enige taak en doel.Meer inligting oor hierdie skakel
Michel Pinson is 'n reisentoesias en inhoudskepper. As hy passie vir onderwys en verkenning saamsmelt, is hy toegewyd om kennis te deel en ander te inspireer deur boeiende opvoedkundige inhoud. Die wêreld nader aan mekaar bring deur individue met wêreldwye kundigheid en 'n gevoel van swerwer te bemagtig.
