Fonts Awesome 6: Pilns pārskats
- 1 Kā instalēt fontu satriecoši
- 1. metode.
- 2. metode.
- 2 Kā izmantot fontu satriecošās ikonas
- 1 standarta ikonas
- 2 lielas ikonas
- 3 fiksētu platuma ikonas
- 4 ikonas ložu sarakstam
- 5 ierāmētas ikonas un citāti
- 6 animētas ikonas
- 7 pārveidotas ikonas
- 8 kombinācijas ikonas
- 3 Font Awesome 4.5.0 collection, classes uncss code to insert using the content property
- 4 Saistītie resursi
- Ikonas izmērs
- Ikonas krāsa
- Bieži Uzdotie Jautājumi
Fonts Awesome ir mērogojamu vektoru ikonu kolekcija. Ikonas var formatēt, izmantojot CSS rekvizītus, iestatīt to krāsu, izmēru, ēnu un daudz ko citu. Fonta versijā 5.5.0 ietilpst 605 ikonas.
1 Kā instalēt fontu satriecoši
1. metode.
Izmantojiet faila fonta-awome.css versiju, pievienojot šo kodu<head> Sadaļa:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Kad fonts ir pievienots, varat izmantot ikonas savā vietnē.
2. metode.
Lejupielādējiet fontu no font Awesome . Izpakojiet arhīvu un augšupielādējiet divas mapes no arhīva uz vietnes serveri - CSS un fontiem. Ja jūsu vietnē jau ir mapes ar šādiem nosaukumiem, tad jums vienkārši jāpievieno faili no lejupielādētajām mapēm.
Jūs varat izmantot faila pilnu vai minificētu versiju:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Kā izmantot fontu satriecošās ikonas
Ikonas var pievienot tīmekļa lapai divos veidos: iestatot atbilstošās klases<i> un<span> elements, vaiby adding them to the desired element using the :before, :after pseudo-elements unthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: pirms {saturs: "\ f015";/ * Pievienot mājas ikonu */font-family: fontAwesome; krāsa: #aaaaaa; margin-labējā: 10 pikseļi;}1 standarta ikonas
Fonts Awesome ir paredzēts lietošanai ar inline elementiem. Lai pievienotu ikonas, vispirms jāiestata FA klase<i> vai<span> elements.
Lai pievienotu atlasīto ikonu pirms vai pēc elementa, tukšs<i></i> vai<span></span> Elements tiek pievienots elementam, kam piešķirta ikonu klase, kā arī papildu klase, kas paplašina stilu.
<i class="fa fa-camera-retro"></i>2 lielas ikonas
Lai palielinātu ikonas lielumu attiecībā pret tā konteineru, izmantojiet FA-LG (palielinājums par 33%), FA-2X, FA-3X, FA-4X, FA-5X klases.
<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 fiksētu platuma ikonas
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation vailists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Mājas</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Bibliotēka</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Pieteikumi</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Iestatījumi</a ></li></ul>4 ikonas ložu sarakstam
Izmantojiet FA-UL un FA-LI klases, lai aizstātu noklusējuma lodes a<ul>…</ul> ložu saraksts.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Saraksta vienums</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Saraksta vienums</li> <li><i class="fa-li fa fa-square"></i>Saraksta vienums</li></ul>5 ierāmētas ikonas un citāti
Use the fa-border class to set the border for the icon. The pull-right unpull-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 sēž amet, consectetur adipiscing elit. Donec Nec Purus Congue, Posuere Libero in, Porta Sapien. SED elit lectus. SED Lacus Elit, Semper Vitae Felis ID, SoDales Congue Sapien.</p>6 animētas ikonas
Pievienojiet FA-Spin, FA-Pulse, FA-ReFresh, FA-COG klases, lai iestatītu vērpšanas ikonas. Animācija netiek atbalstīta 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 pārveidotas ikonas
Lai pagrieztu vai apgrieztu ikonas, izmantojiet fa-rotate-* un fa-flip-* klases.
<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 kombinācijas ikonas
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, unfa-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 uncss code to insert using the content property
Ikonas tīmekļa lietojumprogrammām FA -PIEZĪME - \ f042;Fa -erchor - \ f13d;
FA -Archive - \ F187;
Fa -Arrows - \ f047;
Fa -exastisk - \ f069;
Faat - \ f1fa;
Fa līdzsvara mērogs-\ f24e;
Fa -ban - \ f05e;
Fa -bank - \ f19c;
Fa -barcode - \ f02a;
FA-BATERIJA-EMPTY-\ F244;
FA-BATERIJAS HALF-\ F242;
Fa-battery-cquarter-\ f243;
FA-BATATERY-THEE-CEARTERS-\ F241;
Fa-battery-full-\ f240;
Fa -bed - \ f236;
Fa -beer - \ f0fc;
FA -BELL - \ F0F3;
Fa-Bell-Slash-\ f1f6;
Fa -binoki - \ f1e5;
Fa-dzimšanas dienas kūka-\ f1fd;
Fa -bolt - \ f0e7;
Fa -bumba - \ f1e2;
FA -grāmata - \ f02d;
Lai pagrieztu vai apgrieztu ikonas, izmantojiet fa-rotate-* un fa-flip-* klases.
4 Saistītie resursi
Papildus fontu satriecošajai kolekcijai varat izmantot arī citus ikonu fontus.
Fontello.Fontello ir liela dažādu ikonu fontu kolekcija. Jūs varat atlasīt sev vēlamās ikonas un lejupielādēt tās datorā.
Pamata ikona.Foundation Icon ir vēl viena ikonu fontu kolekcija no fonda ietvara izstrādātājiem. Papildus standarta ikonām vietnei ir apaļas ikonas, sociālo mediju ikonas un daudz kas cits.
materiālu ikonas.Materiālu ikonas ir Google vienotās plakanās ikonas, kas iemieso uztveres vienkāršību. Ikonas ir optimizētas skaistam displejam visās izplatītajās platformās un visām ekrāna izšķirtspējām.
Ikonu fontu kolekcijā ir 750+ ikonas. Vienkāršākais veids, kā instalēt kolekciju savā vietnē, ir izmantot tādas ikonas kā Google Web fonti. Lai to izdarītu, lapas iezīmē ir iekļauts šāds kods:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Lai pareizi parādītu fontu pārlūkprogrammās, elementam, kas izmantos ikonas fontu, tiek piešķirta klase Material-ICONS:
.material-ikonas {font-family: “Materiālu ikonas”; Fonta svars: parasts fonta stils: normāls fonta lielums: 24 pikseļi; / * Vēlamais ikonas izmērs */ displejs: inline-block; Platums: 1em; Augstums: 1em; Līnijas augstums: 1; Teksta pārnešana: nav; Vēstules atstatums: normāls vārdu iesaiņošana: normāls; Baltā telpa: Nowrap; Virziens: LTR; -WebKit-font-ginging: antialiased; / * Atbalsta visas WebKit pārlūkprogrammas */ teksta renderēšana: optimizelegability; / * Safari un Chrome atbalsts */ -moz-oSX-font-Smoothing: GrayScale; /* Firefox atbalsts. */ fontu-fontu iestatījumi: 'liga'; /* Ti, atbalsts. */}Pašas ikonas tiek pievienotas, izmantojot<I class=''material-ikonas''>ikonas ligatūra vai HTML kods</i> Tag, piemēram:
<i class="material-ikonas">konts_balance_wallet</i><i class="material-ikonas"></i>Ligatūru saprot visi mūsdienu pārlūkprogrammas, ti, sākot no 10. versijas. Ikonas kods tiek ģenerēts automātiski, jo jums ir jāatrodas ar kreiso pusi uz ikonas attēla un jākopē ieteiktajam izskatam.
Ikonas izmērs
Ikonas izmērs is controlled by additional classes:
.material-ikonas.md-18 {font-size: 18px;} /* for for<i class="material-ikonas md-18"></i> */.material-ikonas.md-24 {font-size: 24 pikseļi;} /* par<i class="material-ikonas md-24"></i> */.material-ikonas.md-36 {font-size: 36px;} /* par<i class="material-ikonas md-36"></i> */.material-ikonas.md-48 {font-size: 48 pikseļi;} /* for for<i class="material-ikonas md-48"></i> */Ikonas krāsa
Ikonu krāsa ir iestatīta arī, izmantojot papildu klases:
.material-ikonas.md-tark {krāsa: rgba (0, 0, 0, 0,54);} /*<i class="material-ikonas md-dark"></i> */.material-ikonas.md-light {krāsa: rgba (255, 255, 255, 1);} /*<i class="material-ikonas md-light"></i> */.material-ikonas.md-tark.md-neaktīvā {krāsa: rgba (0, 0, 0, 0,26);} /*<i class="material-ikonas md-dark md-inactive"></i> * /.material-ikonas.md-light.md-neaktīva {krāsa: rgba (255, 255, 255, 0,3);} /*<i class="material-ikonas md-light md-inactive">seja</i> */Lai iestatītu pielāgotu krāsu, jums jāpievieno klase, kas nosaka ikonas krāsu, piemēram:
.material-ikonas.indigo {krāsa: #1a237e;} /*<i class="material-ikonas indigo"></i> */Bieži Uzdotie Jautājumi
- Kas vienkāršā izteiksmē ir satriecošs fonts?
- Būtībā tas ir fonts ar ikonām, kuras var pievienot jebkuram tīmekļa lapas elementam, lai uzlabotu tā redzamību un dizainu. Kolekcija sastāv no vairākiem simtiem ikonu, kas piemērota jebkuram uzdevumam un mērķim.Plašāka informācija par šo saiti
Mišels Pinsons ir ceļojumu entuziasts un satura veidotājs. Apmeklējot aizraušanos ar izglītību un izpēti, viņš ir apņēmies dalīties zināšanās un iedvesmot citus, aizraujot izglītības saturu. Tuvinot pasauli, dodot iespēju indivīdiem ar globālu kompetenci un klejošanas sajūtu.
