Jak na Font Awesome

Ikonky jsou populárním doplňkem webu. Nicméně není vždy jednoduché najít takové, které jsou zdarma, mají tu správnou velikost a hodí se do designu webu. Naštěstí je tu skvělé řešení od Dave Grandy, jmenuje se Font Awesome.

Font Awesome umožňuje vkládání vektorových ikon do webu. U ikonek lze upravovat velikost, barvu, stín, prostě cokoliv co umí CSS.

Font Awesome je šířen pod licencí SIL Open Font License (OFL).

SIL Open Font License je svobodná a open source licence vytvořená pro fonty od SIL International určená k použití s některými jejich Unicode fonty. Free Software Foundation považuje tuto licenci za svobodnou.

To znamená, že můžete Font Awesome integrovat do vašich stránek bez nutnosti dávat cokoliv za oplátku, ať už peníze nebo odkaz. To však neznamená, že nemůžete podpořit autora. 🙂

Jak Font Awesome funguje?

Jak už název napovídá, jedná se ve své podstatě o písmo a stejně tak s nim lze zacházet. Můžete jej libovolně zvětšovat nebo zmenšovat, vypadá skvěle na retina zařízeních a ke svému běhu nepotřebuje žádný JS.

Font Awesome obsahuje celkem 519 různých ikonek, ke všem možným příležitostem. Počet ikonek s každou verzí narůstá. Tady je malá ukázka:

Ukázka ikon z Font Awesome

Celou kolekci ikonek si můžete prohlédnout na oficiálních stránkách projektu.

Co Font Awesome umí?

S Font Awesome pracujete jako s písmem, to znamená, že k jeho stylování používáte CSS. Autor však zabudoval některé třídy přímo do framworku a těch můžete využít.

Různá velikost
fa-lg fa-2x fa-3x fa-4x

Seznamy s ikonkou

   Home
   Library
   Applications
   Settings

Animované ikonky

Další ukázky najdete zde.

Jak integrovat Font Awesome do stránek?

Existuje několik způsobů, jak přidat Font Awesome do stránek.

BootstrapCDN od MaxCDN

Díky lidem z MaxCND můžete použít BoostrapCDN a přidat ikonky do webu vložením pouze jednoho řádku kódu. Při této metodě dokonce nemusíte nic stahovat.

Vložte následující kód do webu:

Vlastní CSS

Druhou možností, kterou si tady ukážeme je vložení Font Awesome pomocí vlastního CSS.

Nejprve si stáhněte celý Font Awesome k sobě na disk. Po té ho nahrajte k sobě na hosting.

A nakonec vložte do následující kód:

Poznámka: Je možné, že budete muset upravit cestu k css souboru.

Další způsoby integrace Font Awesome najdete na oficiálních stránkách.

Jak najít ikonku kterou chci?

Poměrně velký obsah ikonek zhoršuje navigaci. Naštěstí lze využít vyhledávač ikonek, do kterého stačí zadat klíčové slovo v angličtině a hned se zobrazí výsledky.

Například pokud hledám telefon, zadám phone.

Vyhledávání ikonek

Nakonec stačí kliknout na ikonku, která se libí a zobrazí se její detail. V detailu najdete náhled ikonky v různých velikostech, její třídu a i přímo kód pro její vložení.

Detail ikonky

Osobně jsem Font Awesome použil již na několika různých projektech a rád se k němu vracím. Co na něj říkáte vy?