--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@wplama.cz title: Jak na Font Awesome url: https://www.wplama.cz/jak-na-font-awesome/ date: 2015-02-14 modified: 2022-12-05 author: Tomáš Cirkl type: post categories: [Zdroje zdarma] tags: [Font Awesome, ikonky] --- Zdroje zdarma # Jak na Font Awesome [TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 14. 2. 2015 Aktualizováno **5. 12. 2022** 3 min čtení Pozor: Článek je z roku 2015. Některé postupy se mohly změnit. ![Font Awesome](https://www.wplama.cz/wp-content/uploads/2015/02/font-awesome.png "Font Awesome") Obsah článku (4 kapitoly) 1. [Jak Font Awesome funguje?](https://www.wplama.cz/jak-na-font-awesome/#jak-font-awesome-funguje) 2. [Co Font Awesome umí?](https://www.wplama.cz/jak-na-font-awesome/#co-font-awesome-umi) 3. [Jak integrovat Font Awesome do stránek?](https://www.wplama.cz/jak-na-font-awesome/#jak-integrovat-font-awesome-do-stranek) 4. [Jak najít ikonku kterou chci?](https://www.wplama.cz/jak-na-font-awesome/#jak-najit-ikonku-kterou-chci) Ikonky jsou populárním doplňkem webu. Nicméně není vždy jednoduché najít takové, které jsou [zdarma](https://www.wplama.cz/100-ikonek-zdarma-a-k-jakymkoliv-ucelum/ "100 ikonek zdarma a k jakýmkoliv účelům"), mají tu správnou velikost a hodí se do designu webu. Naštěstí je tu skvělé řešení od [Dave Grandy](https://twitter.com/davegandy "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](https://www.wplama.cz/licence-k-sablonam-a-pluginum-u-wordpressu/ "Licence nejen k šablonám, pluginům a WordPressu") 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](https://www.wplama.cz/wp-content/uploads/2015/02/ukazka-ikon-z-font-awesome-1024x364.png "Ukázka ikon z Font Awesome")](https://www.wplama.cz/wp-content/uploads/2015/02 / ukazka-ikon-z-font-awesome.png) 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](https://www.wplama.cz/jak-na-font-awesome/)[Library](https://www.wplama.cz/jak-na-font-awesome/)[Applications](https://www.wplama.cz/jak-na-font-awesome/)[Settings](https://www.wplama.cz/jak-na-font-awesome/) ``` 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. ### Bootstrap CDN od Max CDN Díky lidem z Max CND můžete použít Boostrap CDN 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](https://www.wplama.cz/wp-content/uploads/2015/02/vyhledavani-ikonek-1024x250.png "Vyhledávání ikonek")](https://www.wplama.cz/wp-content/uploads/2015/02 / vyhledavani-ikonek.png) 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](https://www.wplama.cz/wp-content/uploads/2015/02/detail-ikonky.png "Detail ikonky")](https://www.wplama.cz/wp-content/uploads/2015/02 / detail-ikonky.png) 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?* - [#Font Awesome](https://www.wplama.cz/stitek/font-awesome/) - [#ikonky](https://www.wplama.cz/stitek/ikonky/) Sdílet - - [](mailto:?subject=Jak na Font Awesome&body=Jak na Font Awesome https://www.wplama.cz/jak-na-font-awesome/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fjak-na-font-awesome%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fjak-na-font-awesome%2F) TC Autor 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 Word Camp Praha a WordPress konferencích. 1 030 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře (11) [Přidat komentář →](https://www.wplama.cz/jak-na-font-awesome/#respond) P Petr [7. 3. 2015](https://www.wplama.cz/jak-na-font-awesome/#comment-1549) Chápu dobře, že je zdarma i ke komerčnímu užití? [Odpovědět](https://www.wplama.cz/jak-na-font-awesome/#comment-1549) TC Tomáš Cirkl WPlama [8. 3. 2015](https://www.wplama.cz/jak-na-font-awesome/#comment-1550) Ano. [Odpovědět](https://www.wplama.cz/jak-na-font-awesome/#comment-1550) --- --- Š Štěpán [19. 5. 2015](https://www.wplama.cz/jak-na-font-awesome/#comment-7006) 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](https://www.wplama.cz/jak-na-font-awesome/#comment-7006) LP Lýdie P. [27. 12. 2015](https://www.wplama.cz/jak-na-font-awesome/#comment-27392) 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/](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](https://www.wplama.cz/jak-na-font-awesome/#comment-27392) --- --- P Petr [24. 5. 2015](https://www.wplama.cz/jak-na-font-awesome/#comment-7818) 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](https://www.wplama.cz/jak-na-font-awesome/#comment-7818) TC Tomáš Cirkl WPlama [25. 5. 2015](https://www.wplama.cz/jak-na-font-awesome/#comment-7869) Zdravím, návod je napsán v článku výše od nadpisu: „Jak integrovat Font Awesome do stránek?“. [Odpovědět](https://www.wplama.cz/jak-na-font-awesome/#comment-7869) --- --- J Jakub [15. 9. 2015](https://www.wplama.cz/jak-na-font-awesome/#comment-23530) 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](https://www.wplama.cz/jak-na-font-awesome/#comment-23530) TC Tomáš Cirkl WPlama [15. 9. 2015](https://www.wplama.cz/jak-na-font-awesome/#comment-23532) 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/](https://wordpress.org/plugins/tinymce-advanced/) vypadá, že by mohl pomoci. [Odpovědět](https://www.wplama.cz/jak-na-font-awesome/#comment-23532) --- JB Jiří Beroušek [21. 9. 2015](https://www.wplama.cz/jak-na-font-awesome/#comment-23925) Ano plugin [https://wordpress.org/plugins/tinymce-advanced/](https://wordpress.org/plugins/tinymce-advanced/) pomůže, jen je třeba v “Nastavení” pluginu Tiny MCE Advanced zaškrtnout položku “Stop removing the

and
tags when saving and show them in the Text editor” [Odpovědět](https://www.wplama.cz/jak-na-font-awesome/#comment-23925) --- --- R Roman [19. 2. 2017](https://www.wplama.cz/jak-na-font-awesome/#comment-50307) 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](https://www.wplama.cz/jak-na-font-awesome/#comment-50307) TC Tomáš Cirkl WPlama [19. 2. 2017](https://www.wplama.cz/jak-na-font-awesome/#comment-50308) Ano, každá ikonka má svou třídu, pomocí které ji můžete upravit přes CSS. [Odpovědět](https://www.wplama.cz/jak-na-font-awesome/#comment-50308) --- --- ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/jak-na-font-awesome/#respond) [← Předchozí článek Katalog šablon na WordPres.org dostane nový kabát](https://www.wplama.cz/katalog-sablon-na-wordpres-org-dostane-novy-kabat/) [Další článek → Videopozvánka na WordCamp 2015 Praha](https://www.wplama.cz/videopozvanka-na-wordcamp-2015-praha/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Zdroje zdarma →](https://www.wplama.cz/wordpress/zdroje-zdarma/) ![astra child sablona od wplama.cz ](https://www.wplama.cz/wp-content/uploads/2024/09/astra-child-sablona-od-wplama.cz_.png "astra child sablona od wplama.cz ") Astra šablona ### [Astra child šablona od WPlama](https://www.wplama.cz/astra-child-sablona-od-wplama/) 16. 9. 2024 1 min čtení --- ![openverse](https://www.wplama.cz/wp-content/uploads/2022/04/openverse.png "openverse") Zdroje zdarma ### [Openverse: vyhledávač médií s otevřenou licencí](https://www.wplama.cz/openverse-vyhledavac-medii-s-otevrenou-licenci/) 25. 4. 2022 3 min čtení --- ![divi nahled](https://www.wplama.cz/wp-content/uploads/2017/01/divi-nahled.png "divi nahled") Divi šablona a Elegant Themes ### [Divi child šablona od WPlama](https://www.wplama.cz/divi-child-sablona/) 17. 6. 2019 3 min čtení ---