Písmo Awesome 6: Úplná recenze
- 1 Jak nainstalovat písmo Awesome
- Metoda 1.
- Metoda 2.
- 2 Jak používat Awesome ikony písma
- 1 standardní ikony
- 2 velké ikony
- 3 ikony pevné šířky
- 4 ikony pro odrážka
- 5 zarámovaných ikon a citací
- 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 související zdroje
- Velikost ikony
- Barva ikon
- Často Kladené Otázky
Font Awesome je sbírka škálovatelných vektorových ikon. Ikony lze naformátovat pomocí vlastností CSS, nastavit jejich barvu, velikost, stín a mnoho dalšího. Písmo verze 5.5.0 obsahuje 605 ikon.
1 Jak nainstalovat písmo Awesome
Metoda 1.
Použijte verzi souboru písma písma přidáním následujícího kódu do<head> sekce:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">Jakmile je písmo připojeno, můžete ikony na svém webu použít.
Metoda 2.
Stáhněte si písmo z font úžasné . Rozbalte archiv a nahrajte dvě složky z archivu na server webu - CSS a Fonts. Pokud již máte na svém webu složky s takovými jmény, stačí k nim přidat soubory ze stažených složek.
Můžete použít úplnou nebo ministrovanou verzi souboru:
<link rel="stylesheet" href="http://yoursite/css/font-awesome.css"><link rel="stylesheet" href="http://yoursite/css/font-awesome.min.css ">2 Jak používat Awesome ikony písma
Ikony lze přidat na webovou stránku dvěma způsoby: nastavením příslušných tříd pro<i> a<span> elements, neboby 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: před {content: "\ f015";/ * Přidat domácí ikonu */Font-Family: Fontawesome; Color: #aaaaaa; margin-right: 10px;}1 standardní ikony
Font Awesome je navržen pro použití s inline prvky. Chcete -li přidat ikony, musíte nejprve nastavit třídu FA na<i> nebo<span> živel.
Chcete -li přidat vybranou ikonu před nebo za prvkem, prázdný<i></i> nebo<span></span> Prvek je přidán do prvku, který je přiřazen třídě ikony, a také další třídu, která rozšiřuje styl.
<i class="fa fa-camera-retro"></i>2 velké ikony
Chcete-li zvýšit velikost ikony vzhledem k její kontejneru, použijte třídy FA-LG (33% nárůst), 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 pevné šířky
Use the fa-fw class to fix the width of the icon. This can be useful for designing navigation nebolists 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> Knihovna</a></li> <li><a href="#"><i class="fa fa-pencil fa -fw"></i> Aplikace</a></li> <li><a href="#"><i class="fa fa-cog fa-fw"></i> Nastavení</a ></li></ul>4 ikony pro odrážka
Použijte třídy FA-UL a FA-LI k nahrazení výchozích kulek v a<ul>…</ul> seznam s odrážkami.
<ul class="fa-ul"> <li><i class="fa-li fa fa-check-square"></i>Položka seznamu</li> <li><i class="fa-li fa fa-spinner fa-spin"></i>Položka seznamu</li> <li><i class="fa-li fa fa-square"></i>Položka seznamu</li></ul>5 zarámovaných ikon a citací
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 sedí amet, entetur 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
Přidejte třídy FA-Spin, FA-Pulse, FA-Refresh, FA-COG pro nastavení ikon spinningu. Animace není podporována 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
Chcete-li otočit nebo převrátit ikony, použijte třídy 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 pro webové aplikace Fa -adjust - \ f042;FA -ACHOR - \ 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-baterry-empty-\ f244;
FA-batery-Half-\ f242;
FA-batery-Quarter-\ f243;
FA-Battery-Three-Quarters-\ f241;
Fa-baterry-full-\ f240;
Fa -bed - \ f236;
FA -Beer - \ f0fc;
Fa -bell - \ f0f3;
Fa-bell-slash-\ f1f6;
FA -Binoculars - \ f1e5;
Fa-birthday-cake-\ f1fd;
FA -Bolt - \ f0e7;
FA -Bomb - \ f1e2;
Fa -kniha - \ f02d;
Chcete-li otočit nebo převrátit ikony, použijte třídy FA-ROTATE-* a FA-Flip-*.
4 související zdroje
Kromě kolekce Awesome Font Awesome můžete použít i další písma ikon.
Fontello.Fontello má velkou sbírku různých písem ikon. Můžete si vybrat ikony, které se vám líbí, a stáhnout je do počítače.
Ikona nadace.Icon nadace je další kolekcí písma ikon od vývojářů Foundation Framework. Kromě standardních ikon nabízí web kulaté ikony, ikony sociálních médií a další.
ikony materiálu.Ikony materiálu jsou sjednocené ploché ikony společnosti Google, které ztělesňují snadné vnímání. Ikony jsou optimalizovány pro krásné displej na všech běžných platformách a pro všechny rozlišení obrazovky.
Kolekce písma ikon obsahuje 750+ ikon. Nejjednodušší způsob, jak nainstalovat sbírku na vašem webu, je použít ikony, jako jsou webová písma Google. Za tímto účelem je do značení stránky zahrnut následující kód:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">Pro správné zobrazení písma v prohlížečích je prvek, který použije písmo ikony, třídu materiálu-ikony:
.Material-ikony {font-family: 'Material Icons'; Písmová váha: Normální styl písma: Normální velikost písma: 24px; / * Preferovaná velikost ikony */ display: inline-block; Šířka: 1EM; Výška: 1EM; Line-Hight: 1; Text-transformace: Žádné; Speakce dopisů: Normální word-wrap: Normal; Bílý prostor: nowrap; Směr: LTR; -Webkit-FONT-Smoothing: Antialiased; / * Podporované všemi prohlížeči WebKit */ Text Renders: Optimizelegibility; / * Podpora safari a chromu */ -moz-OSX-FONT-Smoothing: šedi; /* Podpora Firefoxu. */ písmo-údržby: 'liga'; /* IE podpora. */}Samotné ikony jsou přidány pomocí<I class=''material-ikony''>Ligature nebo HTML kód ikony</i> Tag, například:
<i class="material-ikony">účet_balance_wallet</i><i class="material-ikony"></i>Ligature jsou chápány všemi moderními prohlížeči, tj. Od verze 10. Kód ikony je generován automaticky, proto musíte kliknout na obrázek ikony a zkopírovat navrhovaný vzhled.
Velikost ikony
Velikost ikony is controlled by additional classes:
.material-ikony.md-18 {font-size: 18px;} /* pro<i class="material-ikony md-18"></i> */.material-ikony.md-24 {font-size: 24px;} /* pro<i class="material-ikony md-24"></i> */.material-ikony.md-36 {font-size: 36px;} /* pro<i class="material-ikony md-36"></i> */.material-ikony.md-48 {font-size: 48px;} /* pro<i class="material-ikony md-48"></i> */Barva ikon
Barva ikon je také nastavena pomocí dalších tříd:
.material-ikony.md-dark {color: rgba (0, 0, 0, 0,54);} /*<i class="material-ikony md-dark"></i> */.material-ikony.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ář</i> */Chcete -li nastavit vlastní barvu, musíte například přidat třídu, která definuje barvu ikony:
.material-ikony.indigo {color: #1A237e;} /*<i class="material-ikony indigo"></i> */Často Kladené Otázky
- Co je písmo úžasné jednoduše?
- V podstatě je to písmo s ikonami, které lze přidat do jakéhokoli prvku webové stránky, aby se zvýšila jeho viditelnost a design. Sbírka se skládá z několika stovek ikon vhodných pro jakýkoli úkol a účel.Více informací o tomto odkazu
Michel Pinson je cestovní nadšenec a tvůrce obsahu. Sloučení vášeň pro vzdělávání a průzkum je zapojen ke sdílení znalostí a inspiruje ostatní prostřednictvím podmanivého vzdělávacího obsahu. Přiblížení světa zmocněním jednotlivců s globální odborností a pocitem putování.
