Zdroje zdarma

Jak na Font Awesome

Autor příspěvku Tomáš Cirkl

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

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.

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 <head> 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 <head> 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?

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

11 komentářů

  • Dobrý večer, objevil se mi takový menší problém. Když přidám ikonu řekněme třeba “fa fa-user” tak, aby byla vždy před jménem autora článku, tak se změní font u jména autora na jiný než je ten klasický.

    Setkal jste se už někdy s tímto problémem? Jak jste ho popř. řešil?

    Děkuji

  • Zdravím,
    jakým způsobem tento font přidat do vlastní šablony pro wordpress? Je potřeba to nějak naimportovat jako se importují css styly a js? Jak?

    Díky

    • Zdravím, návod je napsán v článku výše od nadpisu: “Jak integrovat Font Awesome do stránek?”.

  • Dobrý den, mám dotaz ohledně použití. Vždy při přepínání z HTML do Editoru a pak zpět mi kódy zmizí. Mám někde něco špatně nastavené? Nebo se s tím musím smířit? Díky za jakékoliv info.. 🙂

  • Delší dobu již řeším barevnost ikonek, bohužel na webu FA jsem našel pouze examples, které popisujete v článku. Barevnost a velikost větší než fa-5x lze tedy ovlivnit pouze pomocí editace CSS stylů nebo lze generovat konkrétní kód pro konkrétní ikonku přímo na webu FA? Děkuji za odpověď.

Zanechat komentář

Přijďte 1.11. na naše WordPress Školení

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!