Font Awesome 6: Úplná recenzia
- 1 Ako nainštalovať písmo úžasné
- Metóda 1.
- Metóda 2.
- 2 Ako používať font úžasné ikony
- 1 štandardné ikony
- 2 veľké ikony
- 3 Ikony pevnej šírky
- 4 ikony pre zoznam guľôčok
- 5 zarámovaných ikon a úvodzoviek
- 6 animovaných ikon
- 7 Transformované ikony
- 8 kombinovaných ikon
- 3 Font Awesome 4.5.0 collection, classes acss code to insert using the content property
- 4 Súvisiace zdroje
- Ikona
- Ikona
- Často Kladené Otázky
Font Awesome je zbierka škálovateľných vektorových ikon. Ikony je možné naformátovať pomocou vlastností CSS, nastaviť ich farbu, veľkosť, tieň a oveľa viac. Písmo verzie 5.5.0 obsahuje 605 ikon.
1 Ako nainštalovať písmo úžasné
Metóda 1.
Použite verziu súboru font-awesome.css pridaním nasledujúceho kódu do<head> sekcia:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Po pripojení písma môžete na svojom webe použiť ikony.
Metóda 2.
Stiahnite si písmo z font Awesome . Rozbaľte archív a nahrajte dva priečinky z archívu na server Site - CSS a Fonts. Ak už máte na svojich stránkach priečinky s takýmito názvami, stačí k nim pridať súbory z stiahnutých priečinkov.
Môžete použiť úplnú alebo minifikovanú verziu súboru:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Ako používať font úžasné ikony
Ikony je možné pridať na webovú stránku dvoma spôsobmi: nastavením príslušných tried pre<i> a<span> elements, aleboby adding them to the desired element using the :before, :after pseudo-elements athe appropriate value of the content property.
<i class="fa fa-home fa-fw"></i> Li: Pred {content: "\ f015";/ * Pridajte domácu ikonu */family: fontawesome; Color: #aaaaa; margin-right: 10px;}1 štandardné ikony
Font Awesome je navrhnutý tak, aby sa používal s inline prvkami. Ak chcete pridať ikony, musíte najskôr nastaviť triedu FA na<i> alebo<span> prvok.
Ak chcete pridať vybranú ikonu pred alebo po prvku, prázdna<i></i> alebo<span></span> Prvok sa pridá do prvku, ktorý je priradená trieda ikon, ako aj ďalšia trieda, ktorá rozširuje štýl.
<i class="fa fa-camera-retro"></i>2 veľké ikony
Ak chcete zväčšiť veľkosť ikony vzhľadom na jej kontajner, použite triedy FA-LG (33%), 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 Ikony pevnej šírky
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation alebolists on the site.
<ul> <li><a href="#"><i class="fa fa-home fa-fw"></i> Domov</a></li> <li><a href="# "><i class="fa fa-book fa-fw"></i> Knižnica</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Žiadosti</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> nastavenie</a ></li></ul>4 ikony pre zoznam guľôčok
Použite triedy FA-ul a FA-LI, aby ste nahradili predvolené guľky v a<ul>…</ul> Graleted List.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>položka</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>položka</li> <li><i class="fa-li fa fa-square"></i>položka</li></ul>5 zarámovaných ikon a úvodzoviek
Use the fa-border class to set the border for the icon. The pull-right apull-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 SET AMET, CONSESETUR ADIPISCING ELIT. Donec Nec Purus Congue, Posuere Libero In, Porta Sapien. V Sed Elit Lectus. Sed Lacus Elit, Semper Vitae Felis ID, Sodales Congue Sapien.</p>6 animovaných ikon
Pridajte FA-SPIN, FA-Pulse, FA-Refresh, FA-COG triedy, aby ste nastavili ikony spinningu. Animácia nie je podporovaná 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 Transformované ikony
Ak chcete otáčať alebo prevrátiť ikony, použite triedy FA-rotate-* a 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 kombinovaných 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, afa-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 acss code to insert using the content property
Ikony pre webové aplikácie Fa -adjust - \ f042;Fa -kotch - \ f13d;
Fa -archive - \ f187;
Fa -Arrows - \ f047;
FA -ASTERISK - \ F069;
FAAT - \ f1fa;
Fa-Balance-Scale-\ f24e;
FA -BAN - \ f05e;
FA -Bank - \ f19c;
Fa -barcode - \ f02a;
FA-Battery-EMPTY-\ F244;
FA-Battery Half-\ F242;
FA-Battery-Quarter-\ F243;
FA-Battery-Three-Quarters-\ F241;
FA-Battery-Full-\ F240;
FA -BED - \ F236;
FA -BEER - \ f0fc;
FA -Bell - \ f0f3;
FA-Bell-Slash-\ f1f6;
Fa -binokulárne - \ f1e5;
FA-Birthday Cake-\ f1fd;
FA -BOLT - \ F0E7;
Fa -bomba - \ f1e2;
FA -kniha - \ f02d;
Ak chcete otáčať alebo prevrátiť ikony, použite triedy FA-rotate-* a FA-Flip-*.
4 Súvisiace zdroje
Okrem zbierky Font Awesome môžete použiť aj ďalšie písma ikon.
Fontello.Fontello má veľkú zbierku rôznych ikon. Môžete si vybrať ikony, ktoré sa vám páčia, a stiahnuť ich do svojho počítača.
Ikona základov.Nadácia ikona je ďalšia kolekcia písma ikon od vývojárov nadácie Framework. Okrem štandardných ikon obsahuje webové ikony, ikony sociálnych médií a ďalšie.
Materiálne ikony.Materiálne ikony sú zjednotené ploché ikony spoločnosti Google, ktoré stelesňujú ľahké vnímanie. Ikony sú optimalizované pre krásny displej na všetkých bežných platformách a pre všetky rozlíšenie obrazovky.
Zbierka písma ikon obsahuje 750+ ikon. Najjednoduchší spôsob, ako nainštalovať kolekciu na vašom webe, je používať ikony, ako sú napríklad webové fonty Google. Za týmto účelom je uvedený nasledujúci kód v označení stránky:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Na správne zobrazenie písma v prehliadačoch je prvok, ktorý bude používať písmo ikony
.Material-Icons {font-family: 'Material Icons'; Font-Weight: Normálny štýl písma: Normálna veľkosť písma: 24px; / * Preferovaná veľkosť ikon *///////// displej: Inline-blok; Šírka: 1EM; Výška: 1EM; výška riadku: 1; Text-transform: Žiadne; Postupy písmen: Normálne slovo-plod: Normálne; Biely vesmír: Nowrap; Smer: LTR; -Webkit-Font-Smoothing: Antialiased; / * Podporované všetkými prehliadačmi WebKit *///////// Rendering Text: Optimizelegibility; / * Safari a Chrome Support *///////// -Moz-OSX-Font-Smoothing: Grayscale; /* Podpora Firefoxu. *///////// stanovenie fontu: „liga“; /* Tj podpora. */////////}Samotné ikony sa pridávajú pomocou<I class=''material-ikony''>ligata alebo HTML kód ikony</i> napríklad značka:
<i class="material-ikony">účet_balance_wallet</i><i class="material-ikony"></i>Liguture chápu všetky moderné prehliadače, tj - počnúc verziou 10. Kód ikon sa generuje automaticky, pretože musíte kliknúť na ľavú kliknutím na obrázok ikon a skopírovať navrhovaný vzhľad.
Ikona
Ikona is controlled by additional classes:
.material-ikony.md-18 {font-size: 18px;} /* for<i class="material-ikony md-18"></i> */////////.material-ikony.md-24 {font-size: 24px;} /* for<i class="material-ikony md-24"></i> */////////.material-ikony.md-36 {font-size: 36px;} /* for<i class="material-ikony md-36"></i> */////////.material-ikony.md-48 {font-size: 48px;} /* for<i class="material-ikony md-48"></i> */////////Ikona
Farba ikon sa tiež nastavuje pomocou ďalších tried:
.material-ikony.md-dark {color: rgba(0, 0, 0, 0.54);} /*<i class="material-ikony md-dark"></i> */////////.Material-Icons.md-light {color: rgba (255, 255, 255, 1);} /*<i class="material-ikony md-light"></i> */////////.material-ikony.md-dark.md-inactive {color: rgba(0, 0, 0, 0.26);} /*<i class="material-ikony md-dark md-inactive"></i> * / /.material-ikony.md-light.md-inactive {color: rgba(255, 255, 255, 0.3);} /*<i class="material-ikony md-light md-inactive">tvár</i> */////////Ak chcete nastaviť vlastnú farbu, musíte pridať triedu, ktorá definuje napríklad farbu ikony:
.Material-Icons.indigo {color: #1A237E;} /*<i class="material-ikony indigo"></i> */////////Často Kladené Otázky
- Čo je font úžasné jednoduché?
- V podstate ide o písmo s ikonami, ktoré je možné pridať do ktoréhokoľvek prvku webovej stránky, aby sa zvýšila jeho viditeľnosť a dizajn. Zbierka pozostáva z niekoľkých stoviek ikon vhodných na každú úlohu a účel.Viac informácií o tomto prepojení
Michel Pinson je cestovný nadšenec a tvorca obsahu. Zlúčením vášne pre vzdelávanie a prieskumu sa podieľa na zdieľaní vedomostí a inšpirácii ostatných prostredníctvom úchvatného vzdelávacieho obsahu. Spájať svet bližšie tým, že posilňuje jednotlivcov s globálnymi odbornými znalosťami a pocitom túžby.
