Font Awesome 6: Celoten pregled
- 1 Kako namestiti pisavo super
- Metoda 1.
- Metoda 2.
- 2 Kako uporabljati super ikone pisave
- 1 standardne ikone
- 2 veliki ikoni
- 3 ikone fiksne širine
- 4 ikone za seznam met
- 5 uokvirjenih ikon in citatov
- 6 animiranih ikon
- 7 preoblikovanih ikon
- 8 kombiniranih ikon
- 3 Font Awesome 4.5.0 collection, classes incss code to insert using the content property
- 4 sorodni viri
- Velikost ikone
- Barva ikone
- Pogosto Zastavljena Vprašanja
Font Awesome je zbirka razširljivih ikon vektorja. Ikone je mogoče oblikovati s pomočjo lastnosti CSS, nastaviti svojo barvo, velikost, senco in še veliko več. Različica pisave 5.5.0 vključuje 605 ikon.
1 Kako namestiti pisavo super
Metoda 1.
Uporabite različico datoteke Font-awesome.css tako, da v naslednjo kodo dodate v<head> Oddelek:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Ko je pisava povezana, lahko uporabite ikone na svojem spletnem mestu.
Metoda 2.
Prenesite pisavo iz Font Awesome . Razpakirajte arhiv in naložite dve mapi iz arhiva na strežnik spletnega mesta - CSS in pisave. Če že imate mape s takšnimi imeni na svojem spletnem mestu, potem jim morate le dodati datoteke iz prenesenih map.
Uporabite lahko celotno ali minificirano različico datoteke:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Kako uporabljati super ikone pisave
Ikone lahko na spletno stran dodate na dva načina: z nastavitvijo ustreznih razredov za<i> in<span> elements, aliby adding them to the desired element using the :before, :after pseudo-elements inthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: pred {vsebina: "\ f015";/ * Dodaj domačo ikono */-family: Fontawesome; barva: #aaaaaa; margialo: 10px;}1 standardne ikone
Font Awesome je zasnovan tako, da se uporablja z vgrajenimi elementi. Če želite dodati ikone, morate najprej nastaviti razred FA v<i> ali<span> element.
Če želite dodati izbrano ikono pred ali po elementu, prazen<i></i> ali<span></span> Elementu je dodan element, ki je dodeljen razred ikone, pa tudi dodaten razred, ki razširja stajling.
<i class="fa fa-camera-retro"></i>2 veliki ikoni
Če želite povečati velikost ikone glede na njegovo vsebnik, uporabite razrede FA-LG (33% povečanje), FA-2X, FA-3X, FA-4X, 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 ikone fiksne širine
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation alilists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Doma</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Knjižnica</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Prijave</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Nastavitve</a ></li></ul>4 ikone za seznam met
Uporabite razrede fa-ul in fa-li, da zamenjate privzete naboje v a<ul>...</ul> Seznam zbolela.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>element seznama</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>element seznama</li> <li><i class="fa-li fa fa-square"></i>element seznama</li></ul>5 uokvirjenih ikon in citatov
Use the fa-border class to set the border for the icon. The pull-right inpull-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, kontektur adipiscing elit. Donec Nec Purus Congue, Posuere Libero v, Porta Sapien. V sed elit lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 animiranih ikon
Dodajte fa-spin, fa-pulse, fa-refresh, razrede fa-cog, da nastavite ikone vrtenja. Animacija ni podprta v 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 preoblikovanih ikon
Če želite zasukati ali obrniti ikone, uporabite razrede fa-rotate-* in fa-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 kombiniranih ikon
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, infa-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 incss code to insert using the content property
Ikone za spletne aplikacije Fa -adjust - \ f042;FA -Ancor - \ F13D;
Fa -Archive - \ F187;
Fa -aroring - \ f047;
Fa -asterisk - \ f069;
Faat - \ f1fa;
Falance-lestvica-\ f24e;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
Fa -barkoda - \ f02a;
Fa-battery-prast-\ f244;
Fa-battery-pol-\ f242;
Fa-battery-quarter-\ f243;
Fa-ba-battery-Three-Quarters-\ f241;
Fa-battery-full-\ f240;
Fa -bed - \ f236;
FA -BEER - \ F0FC;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
Fa -binokular - \ f1e5;
Fa-Birthday-Cake-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bomba - \ f1e2;
FA -BOOK - \ F02D;
Če želite zasukati ali obrniti ikone, uporabite razrede fa-rotate-* in fa-flip-*.
4 sorodni viri
Poleg kolekcije Font Awesome lahko uporabite tudi druge ikonske pisave.
Fontello.Fontello ima veliko zbirko različnih ikon pisav. Izberete lahko ikone, ki so vam všeč, in jih prenesete v računalnik.
Ikona fundacije.fundacije ikona je še ena zbirka ikonskih pisav od razvijalcev Fundacije. Poleg standardnih ikon ima spletno mesto okrogle ikone, ikone družbenih medijev in drugo.
materialne ikone.Ikone materiala so Googlove enotne ravne ikone, ki utelešajo enostavnost zaznavanja. Ikone so optimizirane za čudovit prikaz na vseh skupnih platformah in za vse ločljivosti zaslona.
Kolekcija ikone pisave vsebuje 750+ ikon. Najlažji način za namestitev zbirke na svojem spletnem mestu je uporaba ikon, kot so Google Web pisave. Če želite to narediti, je v oznako strani vključena naslednja koda:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Za pravilno prikazovanje pisave v brskalnikih je element, ki bo uporabil pisavo ikone, dal razred materiala-ikonov:
.Material-ikone {Font-Family: 'gradiva ikone'; Teža pisave: Normalni stil pisave: normalna velikost pisave: 24px; / * Prednostna velikost ikone */ zaslon: inline-block; širina: 1EM; Višina: 1EM; Vrstica višine: 1; besedilna transformacija: noben; Razmik med črkami: Normal Word-zapiranje: normalno; beli prostor: nowrap; smer: ltr; -WebKit-font-Shiothing: antialialiad; / * Podprto z vsemi brskalniki WebKit */ Ponašanje besedila: OptimizeLegibilnost; / * Podpora za safari in krom */ -Moz-Osx-Font-SMOOTHING: Grayscale; /* Podpora Firefox. */-Font-Feature-Settings: 'liga'; /* Tj. Podpora. */}Ikone se dodajo s pomočjo<I class=''material-ikone''>ligaturna ali html koda ikone</i> oznaka, na primer:
<i class="material-ikone">account_balance_wallet</i><i class="material-ikone"></i>Ligaturo razumejo vsi sodobni brskalniki, tj. Začenši iz različice 10. Ikonska koda se ustvari samodejno, saj morate to levo klikniti na sliko ikone in kopirati predlagani videz.
Velikost ikone
Velikost ikone is controlled by additional classes:
.Material-Icons.md-18 {Font-size: 18px;} /* za<i class="material-ikone md-18"></i> */.Material-Icons.md-24 {Font-size: 24px;} /* za<i class="material-ikone md-24"></i> */.Material-Icons.md-36 {Font-size: 36px;} /* za<i class="material-ikone md-36"></i> */.Material-Icons.md-48 {Font-size: 48px;} /* za<i class="material-ikone md-48"></i> */Barva ikone
Barva ikon je nastavljena tudi z dodatnimi razredi:
.Material-Icons.md-Dark {Color: RGBA (0, 0, 0, 0,54);} /*<i class="material-ikone md-dark"></i> */.Material-ikone.md-Light {Color: Rgba (255, 255, 255, 1);} /*<i class="material-ikone md-light"></i> */.Material-Icons.md-Dark.md-Inactive {Color: Rgba (0, 0, 0, 0,26);} /*<i class="material-ikone md-dark md-inactive"></i> * /.Material-Icons.md-Light.md-Inactive {Color: Rgba (255, 255, 255, 0,3);} /*<i class="material-ikone md-light md-inactive">obraz</i> */Če želite nastaviti barvo po meri, morate dodati razred, ki določa barvo ikone, na primer:
.Material-ikone.indigo {color: #1A237E;} /*<i class="material-ikone indigo"></i> */Pogosto Zastavljena Vprašanja
- Kaj je v preprostih besedah super?
- V bistvu gre za pisavo z ikonami, ki jih je mogoče dodati v kateri koli element spletne strani, da se izboljša njena prepoznavnost in oblikovanje. Zbirka je sestavljena iz nekaj sto ikon, primernih za vsako nalogo in namen.Več informacij o tej povezavi
Michel Pinson je potovalni navdušenec in ustvarjalka vsebine. Združevanje strasti do izobraževanja in raziskovanja je z očarljivimi izobraževalnimi vsebinami deliti znanje in navdih za druge. Zbliževanje sveta z opolnomočenjem posameznikov z globalnim strokovnim znanjem in občutkom potepanja.
