Jak na Font Awesome

Tomáš Cirkl14. 2. 2015Aktualizováno 5. 12. 20223 minuty čtení11 komentářů

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


   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.

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?

O autorovi

Tomáš Cirkl

WordPress specialista · 12 let praxe · 300+ webů ve správě

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.

Domluvit 30min call tomascirkl@gmail.com LinkedIn

11 Komentáře

Petr 7.3.2015 v 23:41

Chápu dobře, že je zdarma i ke komerčnímu užití?
Odpovědět
- Tomáš Cirkl 8.3.2015 v 10:28
  
  Ano.
  Odpovědět
Štěpán 19.5.2015 v 23:55

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
Odpovědět
- Lýdie P. 27.12.2015 v 22:14
  
  Zdravím,
  já jsem toto řešila několikrát na svém webu. Lze to řešit přes kaskádové styly, vizte návod z webu http://astronautweb.co/snippet/font-awesome/ Namísto element napíšete název příslušné třídy, kde chcete ikonku umístit. Doufám, že Vám to pomůže.
  Odpovědět
Petr 24.5.2015 v 22:32

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
Odpovědět
- Tomáš Cirkl 25.5.2015 v 8:43
  
  Zdravím, návod je napsán v článku výše od nadpisu: „Jak integrovat Font Awesome do stránek?“.
  Odpovědět
Jakub 15.9.2015 v 12:37

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.. 🙂
Odpovědět
- Tomáš Cirkl 15.9.2015 v 12:55
  
  Zdravím,
  
  ano problém je v tom, že Vizuální editor není programovací nástroj a HTML prvky nerozpozná a smaže je. Zkuste se podívat po nějakém pluginu. Třeba https://wordpress.org/plugins/tinymce-advanced/ vypadá, že by mohl pomoci.
  Odpovědět
- Jiří Beroušek 21.9.2015 v 7:51
  
  Ano plugin https://wordpress.org/plugins/tinymce-advanced/ pomůže, jen je třeba v “Nastavení” pluginu TinyMCE Advanced zaškrtnout položku
  “Stop removing the <p> and <br /> tags when saving and show them in the Text editor”
  Odpovědět
Roman 19.2.2017 v 15:30

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ěď.
Odpovědět
- Tomáš Cirkl 19.2.2017 v 16:03
  
  Ano, každá ikonka má svou třídu, pomocí které ji můžete upravit přes CSS.
  Odpovědět