Letra ikaragarria 6: Iritzi osoa
- 1 Nola instalatu letra ikaragarria
- 1. metodoa.
- 2. metodoa.
- 2 Nola erabili letra-tipoak Ikono ikaragarriak
- 1 ikono estandarrak
- 2 ikono handi
- 3 zabalera finkoko ikonoak
- Buleten zerrendarako 4 ikonoak
- 5 koaderno ikonoak eta komatxoak
- 6 animaziozko ikonoak
- 7 eraldatutako ikonoak
- 8 konbinazio ikonoak
- 3 Font Awesome 4.5.0 collection, classes etacss code to insert using the content property
- 4 Lotutako baliabideak
- Ikonoaren tamaina
- Ikonoaren kolorea
- Galdera Arruntak
Letra ikaragarria ikono bektore eskalagarrien bilduma da. Ikonoak CSS propietateak erabiliz formateatu daitezke, haien kolorea, tamaina, itzala eta askoz gehiago ezarri daitezke. Letra-tipoaren 5.5.0 bertsioak 605 ikono ditu.
1 Nola instalatu letra ikaragarria
1. metodoa.
Erabili Font-Awesome.css fitxategiaren bertsioa ondorengo kodea gehituz<head> Atala:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Letra-tipoa konektatuta dagoenean, zure webguneko ikonoak erabil ditzakezu.
2. metodoa.
Deskargatu letra-tipoa letra-tipo ikaragarria . Deskonprimitu artxiboa eta igo artxibotik bi karpeta gune zerbitzarira - CSS eta letra tipoak. Zure webguneko izen horrekin karpetak badituzu, deskargatutako karpetetatik fitxategiak gehitu behar dituzu.
Fitxategiaren bertsio osoa edo txikiagoa erabil dezakezu:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Nola erabili letra-tipoak Ikono ikaragarriak
Ikonoak web orrialde batean gehitu daitezke bi eratara: klase egokiak ezarriz<i> eta<span> elements, alaby adding them to the desired element using the :before, :after pseudo-elements etathe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> li: {edukiaren aurretik: "\ f015"; / * Gehitu Hasiera ikonoa * / Font-Family: Fontawesome; Kolorea: #Aaaaaa; marjina: 10px;}1 ikono estandarrak
Letra ikaragarria lineako elementuekin erabiltzeko diseinatuta dago. Ikonoak gehitzeko, lehenengo klasea ezarri behar duzu<i> ala<span> elementua.
Hautatutako ikonoa elementuaren aurretik edo ondoren gehitzeko, hutsik<i></i> ala<span></span> Elementua elementuari gehitzen zaio, ikono klase bat esleitzen zaio, baita estiloa zabaltzen duen klase osagarria ere.
<i class="fa fa-camera-retro"></i>2 ikono handi
Ikono baten tamaina duen ikonoaren tamaina handitzeko, erabili FA-LG (% 33 igoera), FA-2X, FA-3X, FA-4X, FA-5x klaseak.
<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 zabalera finkoko ikonoak
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation alalists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Etxe</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Liburutegi</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Eska</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Ezarpen</a ></li></ul>Buleten zerrendarako 4 ikonoak
Erabili fa-ul eta fa-li klaseak balak lehenetsiak ordezkatzeko<ul>...</ul> Bulleted zerrenda.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Zerrendako elementua</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Zerrendako elementua</li> <li><i class="fa-li fa fa-square"></i>Zerrendako elementua</li></ul>5 koaderno ikonoak eta komatxoak
Use the fa-border class to set the border for the icon. The pull-right etapull-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 eseri da, adipiscing elit. Donec nec purus congue, Porta Sapien. Sed elit lectus-en. Sed Lacus elit, semper vitae felis id, sodales congue sapien.</p>6 animaziozko ikonoak
Gehitu FA-Spin, FA-Pulse, FA-Freskatua, FA-Cog klaseak birak egiteko ikonoak konfiguratzeko. Animazioa ez da onartzen 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 eraldatutako ikonoak
Ikonoak biratzeko edo iraultzeko, erabili FA-biratu- * eta fa-flip- * klaseak.
<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 konbinazio ikonoak
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, etafa-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 etacss code to insert using the content property
Web aplikazioetarako ikonoak Fa-doitu - \ f042;Fa-aingura - \ f13d;
Fa-archive - \ f187;
Fa-geziak - \ f047;
Fa-asterisk - \ f069;
Faat - \ f1fa;
Fa-oreka-eskala - \ f24e;
Fa-debekua - \ f05e;
Fa-bank - \ f19c;
Fa-barracode - \ f02a;
Fa-bateria hutsik - \ f244;
Fa-bateria erdia - \ f242;
Fa-bateria-hiruhilekoa - \ f243;
Fa-bateria-hiru laurdenak - \ f241;
Fa-bateria-osorik - \ f240;
Fa-ohe - \ f236;
Fa-garagardoa - \ f0fc;
Fa-bell - \ f0f3;
Fa-bell-slash - \ f1f6;
Fa-binokularrak - \ f1e5;
Fa-urtebetetze-tarta - \ f1FD;
Fa-bolt - \ f0e7;
Fa-bomb - \ f1e2;
Fa-book - \ f02d;
Ikonoak biratzeko edo iraultzeko, erabili FA-biratu- * eta fa-flip- * klaseak.
4 Lotutako baliabideak
Letra-tipoaren bilduma izateaz gain, beste ikonoen letra-tipoak ere erabil ditzakezu.
Fontello.fontello ikonoen letra-tipoen bilduma handia du. Nahi dituzun ikonoak hauta ditzakezu eta deskargatu ordenagailura.
Fundazioaren ikonoa.Foundation ikonoa Fundazioaren Esparruaren garatzaileen ikonoen bilduma da. Ikono estandarrez gain, guneak ikono biribilak, sare sozialetako ikonoak eta gehiago ditu.
Materialen ikonoak.Materialen ikonoak Google-ren pertzepzio erraztasuna gorpuzten duten ikono lauak dira. Ikonoak optimizatuta daude plataforma arruntetan eta pantailaren ebazpen guztietarako.
Ikonoaren letra-bilketak 750+ ikono ditu. Bilduma bat zure webgunean instalatzeko modurik errazena Google Web letra tipoak bezalako ikonoak erabiltzea da. Horretarako, honako kodea sartzen da orrialdearen markan:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Letra arakatzaileetan behar bezala bistaratzeko, ikonoaren letra-tipoa erabiliko duen elementua material-ikonoen klasea ematen da:
.material-ikonoak {font-family: 'Material ikonoak'; Letra-pisua: Letra-estilo normala: letra-tamaina normala: 24px; / * Nahiago duzun ikonoaren tamaina * / Pantaila: lerroko blokea; Zabalera: 1em; Altuera: 1em; Linearen altuera: 1; Testua-eraldaketa: Bat ere ez; Gutun-tartea: hitz-bilketa normala: normala; Espazio zuria: Nowrap; Zuzendaritza: LTR; -WebKit-Font-leuntzea: Antialiased; / * WebKit Nabigatzaile guztiak * / Testua errendatzeko: optimizagarritasuna; / * Safari eta Chrome laguntza * / -moz-osx-font-leuntzea: grisa; / * Firefox laguntza. * / font-funtzio-ezarpenak: 'Liga'; / * Hau da, laguntza. * /}Ikonoak beraiek gehitzen dira<I class=''material-ikono''>ikonoaren ligadura edo html kodea</i> Etiketa, adibidez:
<i class="material-ikono">account_balance_wallet</i><i class="material-ikono">E </i>Ligadura arakatzaile moderno guztiek ulertzen dute, hau da, 10. bertsiotik hasita. Ikonoaren kodea automatikoki sortzen da, hau da, irten klik ikonoaren irudian eta kopiatu iradokitako itxura.
Ikonoaren tamaina
Ikonoaren tamaina is controlled by additional classes:
.material-ikono.md-18 {letra-tamaina: 18px;} / * for<i class="material-ikono md-18"></i> * /.material-ikonoak.md-24 {letra-tamaina: 24px;} / * for<i class="material-ikono md-24"></i> * /.material-ikonoak.md-36 {letra-tamaina: 36px;} / * for<i class="material-ikono md-36"></i> * /.material-ikono.md-48 {letra-tamaina: 48px;} / * for<i class="material-ikono md-48"></i> * /Ikonoaren kolorea
Ikonoen kolorea ere ezartzen da klase osagarriak erabiliz:
.material-ikono.md-iluna {color: rgba (0, 0, 0, 0,54);} / *<i class="material-ikono md-dark"></i> * /.material-ikono.md-light {color: rgba (255, 255, 255, 1);} / *<i class="material-ikono md-light"></i> * /.material-ikono.md-dark.md-inactive {color: rgba (0, 0, 0, 0,26);} / *<i class="material-ikono md-dark md-inactive"></i> * /.material-ikono.md-light.md-inactive {color: rgba (255, 255, 255, 0,3);} / *<i class="material-ikono md-light md-inactive">aurpegi</i> * /Kolore pertsonalizatua ezartzeko, ikonoaren kolorea definitzen duen klase bat gehitu behar duzu, adibidez:
.material-ikonoak.indigo {kolorea: # 1A237E;} / *<i class="material-ikono indigo"></i> * /Galdera Arruntak
- Zer da letra-tipo ikaragarria termino sinpleetan?
- Funtsean, ikusgaitasuna eta diseinua hobetzeko web orrialdeetako edozein elementu gehitu daitezkeen ikonoekin dago. Bilduma edozein zeregin eta xederako egokiak diren ehunka ikono ditu.Lotura honi buruzko informazio gehiago
Michel Pinson bidaia zalea eta edukien sortzailea da. Hezkuntza eta esploraziorako zaletasuna batuz, ezagutzak partekatzera eta beste batzuk inspiratu ditu hezkuntza edukiak liluratzeko. Mundua elkarrengana hurbiltzea, espezializazio globala duten gizabanakoak eta ibilgailuen zentzua lortuz.
