Font Awesome: Kompletní průvodce knihovně

Volné ikony písmo Awesome: Co to je a to, pro co se používá. Jak připojit ikony na webu. Výhody a nevýhody knihovny.

Sada ikon písma: Ultimate Guide

Font Awesome je sada fontů a ikon založených na CSS a méně. Nástroj umožňuje rychle propojit všechny druhy ikon na webu, což výrazně zlepšuje svůj návrh a použitelnost. Stačí vložit několik řádků kódu.

Font Awesome vám poskytuje škálovatelné ikony vektoru, které můžete snadno přizpůsobit - velikost, barva, stíny a všechno ostatní, co lze provést s CSS.

Awesome knihovna Font má pro vás obrovskou sbírku nejlepších návrhů. Vylepšujete svůj projekt jedinečnými ikony. Ve skutečnosti se jedná o obrovskou sadu všech druhů ikon, které můžete použít pro své vlastní účely.

Ve fontawesome jsou všechny ikony naprosto a zcela zdarma. Knihovna je licencována v rámci GNU General Public License. To znamená, že může být volně používán v komerčních projektech a v zásadě všude.

Sada byla vytvořena Dave Gandhi. Zahrnuje ikony bezplatné sociální média, ikony pro zlepšení uživatelského rozhraní a další.

Typicky, písmo úžasné písmo skripty se používají ve spojení s bootstrapem a bootstrapcdn. Font Awesome je druhý pouze pro fonty Google v popularitě.

Jak to funguje

Hlavním rysem je, že všechny Awesome Ikony fontů nejsou statické obrazy. Jsou ve formátu písma. Jinými slovy, to jsou ikona písma. Například ikona hledání nebo logo sociálních sítí je stejná jako jednoduché znaky A, B, C.

Písmo Awesome Ikony jsou vytvořeny pomocí škálovatelných vektorů. Proto mohou být zvýšeny na téměř libovolnou velikost.

Všechny dostupné ikony jsou zahrnuty v jednom souboru písma. Vše, co potřebujete, je stáhnout tento soubor z oficiální stránky a připojit jej ve stylu.

Proč návrháři zvolí písmo úžasné

Font Awesome má řadu výhod:

• Rychlé připojení. Stačí stáhnout speciální soubor z oficiálních webových stránek a připojit jej zadáním cesty k němu v kódu CSS.
• Flexibilita a škálovatelnost. Ikony lze rozšířit na libovolnou velikost. Symboly budou tak jasné, jak přístroj umožňuje. Ve věku citlivého designu je to důležité. Mimochodem, ze stejného důvodu, font Awesome ikony pro zobrazení sítnice.
• Stylizace. Ikony lze snadno měnit v barvě, velikosti, stínu nebo jiných externích parametrech. Návrhář dostane všechny výhody stylingového řádného textu. Můžete také otočit ikony. Například zobrazení vzhůru nohama nebo otočením o 90 stupňů.
• Rychlé zatížení webu. Všechny ikony jsou součástí jednoho souboru písem. Takže to trvá pouze jeden požadavek HTTP načíst písmo úžasné. To je skvělé pro výkon webových stránek.
• Láska k prohlížečům. Font Awesome je nástroj pro křížový prohlížeč. Nemusíte se starat o kompatibilitu písem a ikon prohlížeče. Jsou dobře podporovány všemi z nich. Dokonce i starý IE8.
• Kompatibilní s různými rámcami. Knihovna byla vytvořena primárně pro bootstrap. Bude však také dobře fungovat s dalšími rámcovými rámcemi.
• Několik formátů. Nástroj je k dispozici ve formátech .eot, .ttf, .woff a SVG. Takže písmo úžasné je manipulováno stejným způsobem jako jiná webová písma.
• Není vyžadován žádný Javascript. Font Awesome nevyžaduje JavaScript ke spuštění.

Písmo Awesome je tedy efektivní a pohodlný nástroj, který významně ukládá dobu rozvržení a urychluje vaše webové stránky.

Nevýhody písma úžasné

Nástroj má také nevýhody. Naštěstí tam nejsou mnoho z nich.

Za prvé, ikony mohou být namalovány pouze v jedné barvě. Toto omezení však může být obcházeno. Například, kombinování svobodných ikon mezi sebou. Nebo pomocí efektů CSS

Zadruhé, font úžasná knihovna obsahuje příliš mnoho ikon a jsou všechny zahrnuty v jednom souboru. Pokud návrhář nebo návrhář rozložení musí připojit pár ikon, stále musí zcela načíst celou knihovnu. A to jsou stovky tisíc dalších ikon, které se zabývají prostorem. Nicméně, zde je zde řešení - vytváření vlastní montáže, která bude obsahovat pouze potřebné ikony.

Font Awesome verze: 5 a 6

Font Awesome 5 byl vydán 7. prosince 2017 a původně obsahoval 1278 ikon. Pátá verze přichází ve dvou balíčcích: zdarma (písmo úžasné zdarma) a placené (písmo úžasné pro). Volný plán také obsahuje ikony ze všech čtvrtých verzí. Ikony jsou k dispozici pod licencí SIL OPEN FONTS 1.1, Creative Commons Attribution 4.0 a mit.

Font Awesome 6 je nová verze, která byla vydána ve druhé polovině roku 2020. Zahrnuje nové ikony a je k dispozici pouze v placeném plánu.

Font Awesome 6 Alpha je také na cestě v roce 2021. To je další nová generace knihovny ikon. Kromě nových ikon, verze 6 alfa také přidává nové styly, nové služby a pomocné nástroje. Uživatelé mohou předobjednávat.

Zdarma a placené plány: Rozdíly a funkce

Můžete si stáhnout ikony pro volný nebo placený tarif plán.

Volný plán zahrnuje více než 1600 ikon a 1 sadu. Kit je sbírka ikon, stylů a nastavení, která umožňuje rychle provádět změny bez přidávání kódu.

Placené tarify:

• Zahrnuje více než 7800 ikon a 20 sad.
• Poskytuje přístup k fontem úžasné pro. To znamená, že ikony lze použít v nativních mobilních aplikacích a v počítači (například v textovém editoru textu nebo při vytváření prezentace v aplikaci PowerPoint).
• Umožňuje nahrát vlastní ikony. Můžete použít své vlastní ikony vedle nebo na místě oficiálních písma úžasné ikony. To je například, jak můžete nahrát logo společnosti. Můžete provést stejné akce s vlastními ikonami jako se základními - změnit styl, velikost, barvu atd.

Obě verze jsou neustálé. To znamená, že jsou poskytnuty jednou a pro všechny.

Způsoby připojení písma úžasné

Nejdříve musíte jít na oficiální webové stránky a stáhnout knihovnu. Stažený archiv musí být rozbalen a složky CSS a fonty zkopírovány do složky webu.

Po tom, že cesta do souboru knihovny je zadána mezi značkami hlavy. Například:

Jak zobrazit písmo Awesome Ikony na webových stránkách. Nejoblíbenější metody:

1.using HTML.

Nejjednodušší způsob.

Musíte jít do galerie na oficiálních stránkách (fontawesome.com/icons?d=gallery) a vybrat ikonu, kterou se vám líbí. Každá ikona má osobní kód, například:. Stačí kopírovat a vložit na správném místě v kódu.

2. přes CSS.

Chcete-li to provést, použijte pseudo-prvky po nebo dříve, stejně jako Unicode požadované ikony. Můžete to vzít vše ve stejné galerii. Příkladem takového kódu: F209.

Příklad položky stylu:

Div :: Po {DISPLAY: BLOCK; Obsah: 'f209'; Font-family: 'Font Awesome 5 zdarma';}

Závěrem: Všechny Awesome Icons

Tak, font Awesome je rychlý a pohodlný způsob, jak přidat zdarma ikony na vaše webové stránky. Všechny ikony jsou snadno škálovatelné a nezpomalují místo.