Font Awesome 6: täielik ülevaade
- 1 Kuidas installida font vinge
- 1. meetod.
- 2. meetod.
- 2 Kuidas kasutada fondi vingeid ikoone
- 1 standardsed ikoonid
- 2 suurt ikooni
- 3 fikseeritud laiusega ikooni
- 4 ikooni täppide nimekirja jaoks
- 5 raamitud ikooni ja tsitaati
- 6 animeeritud ikooni
- 7 ümberkujundatud ikooni
- 8 kombineeritud ikooni
- 3 Font Awesome 4.5.0 collection, classes jacss code to insert using the content property
- 4 seotud ressursid
- Ikooni suurus
- Ikoonivärv
- Korduma Kippuvad Küsimused
Font Awesome on skaleeritavate vektorikoonide kollektsioon. Ikoone saab vormindada, kasutades CSS -i atribuute, seada nende värv, suurus, varju ja palju muud. Fonti versioon 5.5.0 sisaldab 605 ikooni.
1 Kuidas installida font vinge
1. meetod.
Kasutage faili versiooni font-awesy.css, lisades järgmise koodi<head> Jaotis:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Kui font on ühendatud, saate kasutada oma saidil olevaid ikoone.
2. meetod.
Laadige font alla font Awesome . Pange arhiiv lahti ja laadige arhiivist saidi serverisse üles kaks kausta - CSS ja fondid. Kui teil on juba oma saidil selliste nimedega kaustad, peate neile lihtsalt allalaaditud kaustadest faile lisama.
Võite kasutada faili täielikku või ministeritud versiooni:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Kuidas kasutada fondi vingeid ikoone
Ikoone saab veebilehele lisada kahel viisil: seadistades sobivad klassid<i> ja<span> elements, võiby adding them to the desired element using the :before, :after pseudo-elements jathe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: enne {sisu: "\ f015";1 standardsed ikoonid
Font Awesome on mõeldud kasutamiseks koos sisemiste elementidega. Ikoonide lisamiseks peate kõigepealt määrama FA klassi<i> või<span> element.
Valitud ikooni lisamiseks enne või pärast elementi<i></i> või<span></span> Element lisatakse elemendile, mis on määratud nii ikooniklass kui ka täiendav klass, mis laiendab stiili.
<i class="fa fa-camera-retro"></i>2 suurt ikooni
Ikooni suuruse suurendamiseks selle konteineri suhtes kasutage FA-LG (33% suurenemine), FA-2x, FA-3x, FA-4X, FA-5x klassid.
<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 fikseeritud laiusega ikooni
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation võilists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Kodu</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Raamatukogu</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Rakendused</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Sätted</a ></li></ul>4 ikooni täppide nimekirja jaoks
Kasutage a-kuulide asendamiseks FA-UL ja FA-LI klasse<ul>…</ul> Kuuli nimekiri.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>loetelu</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>loetelu</li> <li><i class="fa-li fa fa-square"></i>loetelu</li></ul>5 raamitud ikooni ja tsitaati
Use the fa-border class to set the border for the icon. The pull-right japull-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, adipiscing elit. Donec NEC Purus Congue, POSUEERI LIBERO IN, PORTA SAPIEN. SED ELIT LECTUS. Sed lacus elit, semper vitae felis id, sodales congue sapien.</p>6 animeeritud ikooni
Lisage ketramisikoonide seadistamiseks FA-spin, FA-impulss, FA-Refresh, FA-COG-klassid. Animatsiooni ei toetata IE8 -s - 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 ümberkujundatud ikooni
Ikoonide pööramiseks või klappide jaoks kasutage klasse FA-rotaat-* ja 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 kombineeritud ikooni
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, jafa-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 jacss code to insert using the content property
Veebirakenduste ikoonid FA -kohaline - \ F042;FA -ACHOR - \ F13D;
FA -Archive - \ F187;
FA -Arrows - \ F047;
FA -karjask - \ F069;
Faat - \ f1fa;
Fa-balance-skale-\ f24e;
FA -BAN - \ F05E;
Fa -pank - \ f19c;
FA -BARCODE - \ F02A;
Fa-battery-embady-\ f244;
FA-Battery pool-\ F242;
FA-Battery-kvarter-\ F243;
FA-Battery-kolm neljandikku-\ F241;
Fa-battery-full-\ f240;
FA -BED - \ F236;
FA -Beer - \ F0FC;
Fa -bell - \ f0f3;
FA-BELL-SLASH-\ F1F6;
FA -binokulaarid - \ f1e5;
FA-sünnitus-kook-\ f1fd;
Fa -polt - \ f0e7;
FA -pomm - \ f1e2;
FA -raamat - \ F02D;
Ikoonide pööramiseks või klappide jaoks kasutage klasse FA-rotaat-* ja FA-Flip-*.
4 seotud ressursid
Lisaks fondi vinge kollektsioonile saate kasutada ka muid ikoonfonte.
Fontello.Fontello on suur erinevate ikoonfontide kollektsioon. Saate valida soovitavad ikoonid ja laadida need oma arvutisse alla.
Vundamendiikoon.vundamendi ikoon on veel üks ikoonfondide kogum, mis pärineb sihtasutuse raamistiku arendajatelt. Lisaks standardsele ikoonidele on saidil ümarad ikoonid, sotsiaalmeedia ikoonid ja palju muud.
materiaalsed ikoonid.Materiaalsed ikoonid on Google'i ühtsed lameikoonid, mis kehastavad tajumise lihtsust. Ikoonid on optimeeritud kauni kuvamise jaoks kõigil tavalistel platvormidel ja kõigi ekraanireositsioonide jaoks.
Ikoonfondi kollektsioon sisaldab 750+ ikooni. Lihtsaim viis oma veebisaidile kollektsiooni paigaldamaimiseks on kasutada ikoone nagu Google Web Fonts. Selleks on lehe märgistus järgmine kood:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Fondi korrektseks kuvamiseks brauserites antakse ikoonfonti kasutav element materjali-ikoonide klass:
.material-ikoonid {font-Family: 'materiaalsed ikoonid'; Font-kaal: normaalne font-stiilis: normaalne fondisuurus: 24 pikslit; / * Eelistatud ikooni suurus */ kuva: sisemine blokk; laius: 1em; Kõrgus: 1EM; Line-kõrgus: 1; Teksti muutmine: puudub; Tähtede vahetamine: normaalne sõna-mähis: normaalne; valge ruum: Nowrap; suund: LTR; -Webkit-Font-sujumine: antialias; / * Toetavad kõik WebKiti brauserid */ tekstirenderdamine: optimeerimisvõime; / * Safari ja Chrome'i tugi */ -moz-OSX-Font-Smashing: halltskaala; /* Firefoxi tugi. */ Font-Feature-Settings: 'liga'; /* St tugi. */}Ikoonid ise lisatakse kasutades<I class=''material-ikoonid''>ikooni ligatuur või HTML -kood</i> Näiteks silt:
<i class="material-ikoonid">Account_balance_wallet</i><i class="material-ikoonid"></i>Ligatuuri mõistavad kõik kaasaegsed brauserid, IE - alates versioonist 10. Ikoonkood genereeritakse automaatselt, selleks peate ikoonipildil vasakult klõpsama ja soovitatud ilme kopeerima.
Ikooni suurus
Ikooni suurus is controlled by additional classes:
.material-Icons.md-18 {font-suurus: 18px;} /* jaoks<i class="material-ikoonid md-18"></i> */.material-Icons.md-24 {font-suurus: 24px;} /* jaoks<i class="material-ikoonid md-24"></i> */.material-Icons.md-36 {font-suurus: 36px;} /* jaoks<i class="material-ikoonid md-36"></i> */.material-Icons.md-48 {font-suurus: 48px;} /* jaoks<i class="material-ikoonid md-48"></i> */Ikoonivärv
Ikoonide värv on seatud ka täiendavate klasside abil:
.material-Icons.md-dark {värv: rgba (0, 0, 0, 0,54);} /*<i class="material-ikoonid md-dark"></i> */.material-Icons.md-light {värv: rgba (255, 255, 255, 1);} /*<i class="material-ikoonid md-light"></i> */.Material-ikoonid.md-dark.md-inaktiivne {värv: rgba (0, 0, 0, 0,26);} /*<i class="material-ikoonid md-dark md-inactive"></i> * /.Material-ikoonid.md-light.md-inaktiivne {värv: rgba (255, 255, 255, 0,3);} /*<i class="material-ikoonid md-light md-inactive">nägu</i> */Kohandatud värvi seadmiseks peate lisama klassi, mis määratleb näiteks ikooni värvi:
.material-Icons.indigo {värv: #1a237e;} /*<i class="material-ikoonid indigo"></i> */Korduma Kippuvad Küsimused
- Mis on Font vinge lihtsas mõttes?
- Sisuliselt on see ikoonidega font, mida saab lisada mis tahes veebilehe elemendile, et parandada selle nähtavust ja kujundust. Kollektsioon koosneb mitmest sada ikoonist, mis sobivad mis tahes ülesande ja eesmärgi saavutamiseks.Lisateave selle lingi kohta
Michel Pinson on reisihuviline ja sisulooja. Kirg hariduse ja uurimise vastu ühendas ta teadmiste jagamise ja teiste inspireerimisel haridussisu võlumise kaudu. Viies maailma kokku, andes inimestele ülemaailmse teadmise ja kõndimise tunde.
