Písmo Awesome: Kompletná knižnica sprievodca

ZADARMO ICONS FONT AWESOME: Čo to je a čo sa používa. Ako pripojiť ikony na stránku. Výhody a nevýhody knižnice.

Font Awesome Icon Set: The Ultimate Guide

Písmo Awesome je súbor fontov a ikon založených na CSS a menej. Nástroj vám umožňuje rýchlo pripojiť všetky druhy ikon na stránku, výrazne zlepšovať jeho návrh a použiteľnosť. Stačí vložiť niekoľko riadkov kódu.

Font Awesome vám poskytuje škálovateľné vektorové ikony, ktoré si môžete ľahko prispôsobiť - veľkosť, farbu, tiene a všetko ostatné, čo sa dá urobiť s CSS.

Font Awesome Library má pre vás obrovskú zbierku najlepších návrhov. Vylepšujete svoj projekt jedinečnými ikonami. V skutočnosti je to obrovská skupina všetkých druhov ikon, ktoré môžete použiť na svoje vlastné účely.

Vo fontawesome sú všetky ikony absolútne a úplne zadarmo. Knižnica je licencovaná na základe všeobecnej verejnej licencie GNU. To znamená, že sa môže voľne používať v komerčných projektoch av zásade všade.

Súprava bola vytvorená Dave Gandhi. Zahŕňa bezplatné ikony sociálnych médií, ikony na zlepšenie používateľského rozhrania a ďalšie.

Typicky, font úžasné písmo skripty sa používajú v spojení s bootstrap a bootstrapcdn. Písmo Awesome je druhý len na Google Fonty v popularite.

Ako to funguje

Hlavnou vlastnosťou je, že všetky ikony fontu nie sú statické obrázky. Sú vo formáte písma. Inými slovami, tieto sú ikony fonty. Napríklad ikona vyhľadávania alebo logo sociálnej siete je rovnaké ako jednoduché znaky A, B, C.

Písmo Awesome ikony sú vytvorené pomocou škálovateľných vektorov. Preto sa môžu zvýšiť na takmer akúkoľvek veľkosť.

Všetky dostupné ikony sú zahrnuté v jednom súbore fontov. Všetko, čo potrebujete, je prevziať tento súbor z oficiálnej stránky a pripojiť ho do štýlov.

Prečo dizajnéri vyberú úžasné písmo

Písmo Awesome má množstvo výhod:

• Rýchle spojenie. Stačí len si stiahnuť špeciálny súbor z oficiálnych webových stránok a pripojiť ho zadaním cesty k nemu v kóde CSS.
• Flexibilita a škálovateľnosť. Ikony sa dajú zväčšiť na ľubovoľnú veľkosť. Symboly budú také jasné, pretože zariadenie umožňuje. Vo veku citlivého dizajnu je to dôležité. Mimochodom, z toho istého dôvodu, font awesome ikony sú vhodné pre displeji sietnice.
• Štylizácia. Ikony sa dajú ľahko zmeniť vo farbe, veľkosti, tieni alebo iných externých parametroch. Dizajnér dostane všetky výhody štýlového pravidelného textu. Môžete tiež otáčať ikony. Napríklad zobrazí hore nohami alebo otočte o 90 stupňov.
• Rýchle načítanie stránky. Všetky ikony sú zahrnuté v jednom súbore fontov. Trvá len jednu požiadavku HTTP na načítanie písma AWESOME. To je skvelé pre výkonnosť webových stránok.
• Láska k prehliadačom. Písmo Awesome je nástroj pre prehliadač. Nemusíte sa starať o kompatibilitu prehliadača fontov a ikon. Všetci sú dobre podporované. Dokonca aj starý IE8.
• Kompatibilný s rôznymi rámcami. Knižnica bola vytvorená predovšetkým na bootstrap. Avšak, to bude fungovať aj s inými rámcami.
• Niekoľko formátov. Nástroj je k dispozícii vo formátoch .EOT, .ttf, .woff a SVG. Takže font úžasné je spracované rovnakým spôsobom ako iné webové fonty.
• Nevyžaduje sa žiadny Javascript. Písmo Awesome nevyžaduje, aby sa javascript mohol spustiť.

Awesome je teda účinný a pohodlný nástroj, ktorý výrazne ukladá čas rozloženia a urýchľuje vaše webové stránky.

Nevýhody fontu úžasné

Nástroj má tiež nevýhody. Našťastie nie je z nich mnoho.

Po prvé, ikony môžu byť natreté len v jednej farbe. Toto obmedzenie je však možné obísť. Napríklad, kombináciou voľných ikon s ostatnými. Alebo pomocou efektov CSS

Po druhé, font awesome knižnica obsahuje príliš veľa ikon a sú zahrnuté v jednom súbore. Ak návrhár alebo rozloženie návrhár musí len pripojiť niekoľko ikon, ešte musia úplne načítať celú knižnicu. A to sú stovky tisíc extra ikony, ktoré zaberajú priestor. Existuje však aj riešenie - vytvorenie vlastného zhromaždenia, ktoré bude obsahovať iba potrebné ikony.

Písmo Awesome verzie: 5 a 6

Písmo Awesome 5 bolo vydané 7. decembra 2017 a pôvodne obsahoval 1278 ikon. Piata verzia prichádza v dvoch balíkoch: zadarmo (font úžasné) a zaplatené (font awesome Pro). Voľný plán obsahuje aj ikony zo všetkých štvrtých verzií. Ikony sú k dispozícii v rámci licencie na otvorenú písmo 1.1, Creative Commons Attribution 4.0 a MIT.

Písmo Awesome 6 je nová verzia, ktorá bola vydaná v druhej polovici roku 2020. Zahŕňa nové ikony a je k dispozícii len v platenom pláne.

Písmo Awesome 6 alfa je tiež na ceste v roku 2021. Toto je ďalšia nová generácia knižnice ikon. Okrem nových ikon, verzia 6 alfa tiež pridáva nové štýly, nové služby a pomocné nástroje. Používatelia môžu predobjednať.

Voľné a platené plány: Rozdiely a funkcie

Môžete si stiahnuť ikony zadarmo alebo platený tarifný plán.

Voľný plán zahŕňa viac ako 1600 ikon a 1 sady. Súprava je súbor ikon, štýly a nastavenia, ktoré vám umožní rýchlo vykonať zmeny bez pridania kódu.

Platená sadzba:

• Zahŕňa viac ako 7800 ikon a 20 sad.
• Poskytuje prístup k fontom AWESOME PRO. To znamená, že ikony môžu byť použité v natívnych mobilných aplikáciách a vo vašom počítači (napríklad v editore textu slova alebo pri vytváraní prezentácie v programe PowerPoint).
• Umožňuje nahrať svoje vlastné ikony. Môžete použiť svoje vlastné ikony vedľa alebo namiesto oficiálnych ikon úžasných písiem. Takto môžete nahrať logo spoločnosti. Môžete vykonať rovnaké akcie s vlastnými ikonami ako so základnými - Zmeňte štýl, veľkosť, farbu atď.

Obe verzie sú trvalé. To znamená, že sú poskytnuté raz a pre všetkých.

Spôsoby pripojenia fontu úžasné

Po prvé, musíte ísť na oficiálnej webovej stránky a stiahnuť knižnicu. Stiahnutý archív musí byť rozbalený a priečinky CSS a Fonts skopírované do priečinka vašej stránky.

Potom je medzi štítmi špecifikovaná cesta do súboru knižnice. Napríklad:

Ako zobraziť font awesome ikony na webovej stránke. Najobľúbenejšie metódy:

1.Použitie HTML

Najjednoduchší spôsob.

Musíte ísť do galérie na oficiálnych stránkach (fontawesome.com/icons?d=gallery) a vyberte si ikonu, ktorú sa vám páči. Každá ikona má osobný kód, napríklad :. Stačí kopírovať a prilepiť na správnom mieste v kóde.

2. Cez CSS

Ak to chcete urobiť, použite pseudo-prvky po alebo predtým, ako aj Unicode požadovanej ikony. Môžete si ho vziať v tej istej galérii. Príklad takéhoto kódu: F209.

Príklad položky Súbor štýlu:

Div :: Po {displej: blok; Obsah: "F209"; FONDY FAMILY: 'FONT AWESOME 5 Free';}

Na záver: všetky ikony awesome

Awesome je teda rýchly a pohodlný spôsob, ako pridať zadarmo ikony na vaše webové stránky. Všetky ikony sú ľahko škálovateľné a nespomaľujú stránku.