Betűtípus Félelmetes 6: Teljes áttekintés
- 1 Hogyan kell telepíteni a betűtípust félelmetes
- 1. módszer.
- 2. módszer.
- 2 Hogyan kell használni a betűtípus félelmetes ikonokat
- 1 standard ikon
- 2 nagy ikon
- 3 rögzített szélességi ikon
- 4 ikon a felsorolt listához
- 5 keretes ikon és idézet
- 6 animált ikon
- 7 átalakított ikonok
- 8 kombinált ikon
- 3 Font Awesome 4.5.0 collection, classes éscss code to insert using the content property
- 4 kapcsolódó erőforrás
- Ikonméret
- Ikonszín
- Gyakran Feltett Kérdéseket
A Font Awesome egy skálázható vektor ikon gyűjteménye. Az ikonok CSS tulajdonságokkal formázhatók, beállíthatják színüket, méretüket, árnyékát és még sok minden mást. Az 5.5.0 betűkészlet 605 ikont tartalmaz.
1 Hogyan kell telepíteni a betűtípust félelmetes
1. módszer.
Használja a fájl betűtípus-awesome.css verzióját a következő kód hozzáadásával a<head> szakasz:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Miután a betűkészlet csatlakoztatta, használhatja a webhely ikonjait.
2. módszer.
Töltse le a betűtípust a FONT Awesome -ból. Csomagolja ki az archívumot, és töltsön fel két mappát az archívumból a webhelykiszolgálóra - CSS és betűkészletek. Ha már van olyan mappája, amelynek ilyen nevei vannak a webhelyén, akkor csak fájlokat kell hozzáadnia a letöltött mappákból.
Használhatja a fájl teljes vagy minified verzióját:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Hogyan kell használni a betűtípus félelmetes ikonokat
Az ikonok kétféle módon hozzáadhatók a weboldalhoz: a megfelelő osztályok beállításával<i> és<span> elements, vagyby adding them to the desired element using the :before, :after pseudo-elements ésthe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> LI: A {tartalom: "\ f015";/ * HOME ikon hozzáadása előtt */FONT-Family: FontaWesome; szín: #aaaaaa; margin-jobb: 10 px;}1 standard ikon
A FONT Awesvast úgy tervezték, hogy beépíthető elemekkel használják. Az ikonok hozzáadásához először be kell állítania a FA osztályt a<i> vagy<span> elem.
A kiválasztott ikon hozzáadásához az elem előtt vagy után, egy üres<i></i> vagy<span></span> Az elemet hozzáadjuk az elemhez, amelyhez ikonórát rendelnek, valamint egy további osztályt, amely kiterjeszti a stílusot.
<i class="fa fa-camera-retro"></i>2 nagy ikon
Az ikon méretének növeléséhez a konténeréhez viszonyítva használja a FA-LG (33% -os növekedés), FA-2X, FA-3X, FA-4X, FA-5X osztályokat.
<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 rögzített szélességi ikon
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation vagylists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> itthon</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Könyvtár</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Alkalmazások</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Beállítások</a ></li></ul>4 ikon a felsorolt listához
Használja a FA-UL és a FA-LI osztályokat az alapértelmezett golyók cseréjéhez a<ul>…</ul> Bulrált lista.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>listaelem</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>listaelem</li> <li><i class="fa-li fa fa-square"></i>listaelem</li></ul>5 keretes ikon és idézet
Use the fa-border class to set the border for the icon. The pull-right éspull-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, konvtur adipiscing elit. Donec NEC Purus Conue, Posuere Libero, Porta Sapien. A sed elit pecil -ben. Sed Lacus elit, Semper Vitae Felis ID, Sodales Conue Sapien.</p>6 animált ikon
Adja hozzá az FA-spin, a Fa-Pulse, a Fa-Refresh, a FA-COG osztályokat a forgó ikonok beállításához. Az animációt az IE8 - IE9 nem támogatja.
<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 átalakított ikonok
Az ikonok forgatásához vagy forgatásához használja a Fa-Rotate-* és a Fa-Flip-* osztályokat.
<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ált 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, ésfa-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 éscss code to insert using the content property
Ikonok webes alkalmazásokhoz FA -igazítás - \ F042;Fa -anchor - \ f13d;
Fa -Archive - \ F187;
FA -Arrows - \ F047;
Fa -Asterisk - \ F069;
Faat - \ f1fa;
Fa-Balance-skála-\ f24e;
Fa -Ban - \ f05e;
Fa -Bank - \ f19c;
Fa -Barcode - \ f02a;
Fa-Lothery-Patty-\ f244;
Fa-Let-féle-fél-\ f242;
Fa-Lattery-negyedév-\ f243;
Fa-Lattery-három negyed-\ f241;
Fa-LetfluL-\ f240;
FA -BED - \ F236;
Fa -sör - \ f0fc;
Fa -Bell - \ f0f3;
Fa-Bell-Slash-\ F1F6;
Fa -binoculars - \ f1e5;
Fa-születda-sütemény-\ f1fd;
Fa -Bolt - \ F0E7;
Fa -bomb - \ f1e2;
Fa -könyv - \ f02d;
Az ikonok forgatásához vagy forgatásához használja a Fa-Rotate-* és a Fa-Flip-* osztályokat.
4 kapcsolódó erőforrás
A FONT Awesome Collection mellett más ikon betűtípusokat is használhat.
Fontello.Fontello nagy gyűjteménye különféle ikon betűtípusokból. Kiválaszthatja a kedvelt ikonokat, és letöltheti azokat a számítógépére.
Alapítvány ikon.Foundation ikon A egy másik ikon betűtípus -gyűjtemény az alapítvány keretének fejlesztőinek. A standard ikonokon kívül a webhely kerek ikonokkal, közösségi média ikonokkal és még sok mással is rendelkezik.
Anyag ikonok.Az anyagi ikonok a Google egységes lapos ikonjai, amelyek megkönnyítik az észlelést. Az ikonokat optimalizálják az összes közös platformon és az összes képernyőfelbontáshoz.
Az ikon betűtípus -gyűjtemény 750+ ikont tartalmaz. A gyűjtemény legegyszerűbb módja a webhelyére, ha olyan ikonokat használ, mint a Google Web Fonts. Ehhez a következő kód található az oldal jelölésében:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">A betűkészlet helyes megjelenítéséhez a böngészőkben az ikon betűtípusát használó elem kapja az Anyag-On-os osztályt:
.Material-ikonok {font-család: 'Anyag ikonok'; Betűtípus-súly: Normál betűtípus-stílus: Normál betűméret: 24 képpont; / * Preferált ikonméret */ kijelző: inline-block; Szélesség: 1em; Magasság: 1em; vonal-magasság: 1; Szöveg-transzformáció: Nincs; Levél-távolság: Normál szó-wrap: normál; Fehér-tér: Nowrap; Irány: LTR; -Webkit-Font-Smoothing: antialiased; / * Az összes WebKit böngésző támogatja */ Szöveg-átadás: OptimizeLabibility; / * Szafari és króm támogatás */ -moz-osx-smoothing: szürkeárnyalatos; /* Firefox támogatás. */ betűkészlet-funkció-beállítások: 'liga'; /* IE támogatás. */}Maguk az ikonok hozzáadják a<I class=''material-ikonok''>Az ikon ligatúra vagy html kódja</i> Címke, például:
<i class="material-ikonok">account_balance_wallet</i><i class="material-ikonok"></i>A ligatúrát minden modern böngésző érti, azaz - a 10. verziójától kezdve. Az ikonkód automatikusan generálódik, ehhez kattintson az ikon képre, és másolja a javasolt megjelenést.
Ikonméret
Ikonméret is controlled by additional classes:
.Material-ikonok.md-18 {betűméret: 18px;} /*<i class="material-ikonok md-18"></i> */.Material-ikonok.md-24 {betűméret: 24px;} /*<i class="material-ikonok md-24"></i> */.Material-ikonok.md-36 {betűméret: 36px;} /*<i class="material-ikonok md-36"></i> */.Material-ikonok.md-48 {betűméret: 48px;} /*<i class="material-ikonok md-48"></i> */Ikonszín
Az ikonok színét további osztályok felhasználásával is beállítják:
.Material-ikonok.md-Dark {szín: rgba (0, 0, 0, 0,54);} /*<i class="material-ikonok md-dark"></i> */.Material-ikonok.md-light {szín: RGBA (255, 255, 255, 1);} /*<i class="material-ikonok md-light"></i> */.Material-ikonok.md-dark.md-inaktív {szín: rgba (0, 0, 0, 0,26);} /*<i class="material-ikonok md-dark md-inactive"></i> * /.Material-ikonok.md-light.md-inaktív {szín: RGBA (255, 255, 255, 0,3);} /*<i class="material-ikonok md-light md-inactive">arc</i> */Az egyéni szín beállításához hozzá kell adnia egy osztályt, amely meghatározza az ikon színét, például:
.Material-ikonok.Indigo {szín: #1a237e;} /*<i class="material-ikonok indigo"></i> */Gyakran Feltett Kérdéseket
- Mi a betűtípus félelmetes egyszerűen?
- Lényegében ez egy betűtípus olyan ikonokkal, amelyeket bármilyen weboldal elemhez hozzá lehet adni, hogy javítsa láthatóságát és kialakítását. A gyűjtemény több száz ikonból áll, amelyek bármilyen feladatra és célra alkalmasak.További információ erről a linkről
Michel Pinson utazási rajongó és tartalomkészítő. Az oktatás és a felfedezés iránti szenvedély egyesítésével elgondolkodott az ismeretek megosztására és másoknak inspirálására az oktatási tartalom elbűvölő tartalma révén. A világ közelebb hozása azáltal, hogy felhatalmazza az egyének globális szakértelemmel és a vándorlás érzésével.
