--- 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 vytvořit a implementovat vlastní obrázkové písmo url: https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/ date: 2021-03-22 modified: 2021-03-19 author: Tomáš Cirkl type: post categories: [Ostatní] tags: [child šablona, ikony, písmo, WordPress] --- Ostatní # Jak vytvořit a implementovat vlastní obrázkové písmo [TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 22. 3. 2021 3 min čtení Pozor: Článek je z roku 2021. Některé postupy se mohly změnit. ![Vlastní obrázkové písmo](https://www.wplama.cz/wp-content/uploads/2021/03/vlastni-obrazkove-pismo.png "Vlastní obrázkové písmo") Obsah článku (4 kapitoly) 1. [Co je to Icon Font?](https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/#co-je-to-icon-font) 2. [Ikony](https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/#ikony) 3. [Tvorba vlastního písma s ikonkami](https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/#tvorba-vlastniho-pisma-s-ikonkami) 4. [Implementace písma do WordPress šablony](https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/#implementace-pisma-do-wordpress-sablony) Dřív se ikony do webu vkládaly jako bitmapové obrázky (nejčastěji PNG na průhledném pozadí), později jako vektory (SVG). Dnes už si můžete snadno na základě SVG obrázku vytvořit i své vlastní obrázkové písmo a vytvořit tak ikonu jednoduše upravitelnou pomocí CSS. V tomto článku si ukážeme jak vytvořit vlastní ikonu jako písmo (Icon Font). ## Co je to Icon Font? Icon Font je vlastně obrázkové písmo. Zobrazení ikony pomocí písma není v ničem odlišné od písma použitého pro nadpisy a text. Používání vlastní ikony jako písma má spoustu výhod: - Ikona je škálovatelná bez ztráty kvality; - není potřeba speciálně řešit retina zobrazení; - jednoduše upravitelná pomocí CSS (barva, velikost, přechod, stínování atd.); - jednu ikonu můžete použít opakovaně s různým nastavení barevnosti, velikosti nebo odsazení; - Icon Font se načítá rychleji než SVG. Nicméně jsou tu i nevýhody. Například rozdíly mezi prohlížeči mohou vést k různému renderování a drobným rozdílům v zobrazení. ## Ikony Než se do tvorby vlastního písma pustíte, je potřeba mít připravené ikony ve formátu SVG (Scalable Vector Graphics). Ikony si můžete navrhnout vlastní nebo si je stáhnout z databank jako je [FontAwesome](https://fontawesome.com/icons) nebo [Google Icons](https://fonts.google.com/icons). [![Google Icons](https://www.wplama.cz/wp-content/uploads/2021/03/google-icons-1024x496.png "Google Icons")](https://www.wplama.cz/wp-content/uploads/2021/03 / google-icons.png) Google Icons ## Tvorba vlastního písma s ikonkami Jakmile máte připravené všechny ikony, můžete se pustit do samotné tvorby obrázkového písma. Proces je velmi jednoduchý, protože existují online nástroje, které je k tomu možné využít. Patří mezi ně například [icomoon](https://icomoon.io/app/) nebo [Fontello](http://fontello.com/). V tomto návodu budeme dále pokračovat s **icomoon**. Krok 1: **Nahrajte do nástroje ikony a vytvořte vlastní sestavu.** [![Nahrání vlastních ikon](https://www.wplama.cz/wp-content/uploads/2021/03/nahrani-vlastnich-ikon-1-1024x372.png "Nahrání vlastních ikon")](https://www.wplama.cz/wp-content/uploads/2021/03 / nahrani-vlastnich-ikon-1.png) Nahrání vlastních ikon Krok 2: **Vyberte ikony, které chcete zahrnout do vlastního písma.** [![Výběr ikony](https://www.wplama.cz/wp-content/uploads/2021/03/vyber-ikony-1024x433.png "Výběr ikony")](https://www.wplama.cz/wp-content/uploads/2021/03 / vyber-ikony.png) Výběr ikony Krok 3: **Vygenerujte písmo.** [![Generování písma](https://www.wplama.cz/wp-content/uploads/2021/03/generovani-pisma-1024x519.png "Generování písma")](https://www.wplama.cz/wp-content/uploads/2021/03 / generovani-pisma.png) Generování písma Krok 4: **Přejmenujte ikony a případně i definujte unicode znaky (volitelné).** [![Přejmenování ikon](https://www.wplama.cz/wp-content/uploads/2021/03/prejmenovani-ikon.png "Přejmenování ikon")](https://www.wplama.cz/wp-content/uploads/2021/03 / prejmenovani-ikon.png) Přejmenování ikon Krok 5: **Stáhněte vygenerované písmo.** [![Stažení písma](https://www.wplama.cz/wp-content/uploads/2021/03/stazeni-pisma-1024x496.png "Stažení písma")](https://www.wplama.cz/wp-content/uploads/2021/03 / stazeni-pisma.png) Stažení písma ## Implementace písma do WordPress šablony Stažený zip obsahuje několik připravených souborů, mezi nimi i CSS styly a soubory písma ve složce fonts. Pro implementaci do šablony je nejlepší k tomu využít [child šablonu](https://www.wplama.cz/vytvorit-child-sablonu/). Krok 1: **Zkopírujte složku *fonts* z rozbaleného zipu do adresáře child šablony *(wp-content/themes/[slozkachildsablony])* na [FTP](https://www.wplama.cz/jak-se-pripojit-na-hosting-pomoci-ftp-klienta/).** [![FTP přesun složky fonts](https://www.wplama.cz/wp-content/uploads/2021/03/ftp-presun-slozky-fonts-1024x219.png "FTP přesun složky fonts")](https://www.wplama.cz/wp-content/uploads/2021/03 / ftp-presun-slozky-fonts.png) FTP přesun složky fonts Krok 2: **Do style.css v child šabloně vložte následující kód.** ``` @font-face { font-family: 'icomoon'; src: url('./fonts/icomoon.eot?5kiojs'); src: url('./fonts/icomoon.eot?5kiojs#iefix') format('embedded-opentype'), url('./fonts/icomoon.ttf?5kiojs') format('truetype'), url('./fonts/icomoon.woff?5kiojs') format('woff'), url('./fonts/icomoon.svg?5kiojs#icomoon') format('svg'); font-weight: normal; font-style: normal; } ``` Krok 3: **Použití v HTML.** Ikonu můžete vložit pomocí následujícího HTML kódu: ``` ˂span class="icon-toret">˂/span> ``` Třída „icon-toret“ se generuje ze zadaného názvu ikony při generování písma. Je tedy potřeba případně upravit podle vlastního zadání. Pokud si nejste jistí, podívejte se do stylů ve stažené složce z iconmoon. Odkazující třída pro stylování je: ``` .icon-toret:before { content: "\e900"; color: #9ea3a8; } ``` Příklad stylování této ikony pak může být například: ``` .icon-toret:before { content: "61"; color: #c0dfe8; font-size: 72px; margin-bottom: 24px; } .icon-write:hover::before { color: #000000; } ``` Ukázka z praxe, kde jsme vygenerovanou ikonu použili u našich [WooCommerce pluginů](https://toret.cz/). [![Toret Zásilkovna](https://www.wplama.cz/wp-content/uploads/2021/03/toret-zasilkovna.png "Toret Zásilkovna")](https://www.wplama.cz/wp-content/uploads/2021/03 / toret-zasilkovna.png) Toret Zásilkovna - [#child šablona](https://www.wplama.cz/stitek/child-sablona/) - [#ikony](https://www.wplama.cz/stitek/ikony/) - [#písmo](https://www.wplama.cz/stitek/pismo/) - [#WordPress](https://www.wplama.cz/stitek/wordpress/) Sdílet - - [](mailto:?subject=Jak vytvořit a implementovat vlastní obrázkové písmo&body=Jak vytvořit a implementovat vlastní obrázkové písmo https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fjak-vytvorit-a-implementovat-vlastni-obrazkove-pismo%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fjak-vytvorit-a-implementovat-vlastni-obrazkove-pismo%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 (1) [Přidat komentář →](https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/#respond) J Jana [14. 9. 2023](https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/#comment-309203) moc děkuji, pomohlo! [Odpovědět](https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/#comment-309203) --- ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/jak-vytvorit-a-implementovat-vlastni-obrazkove-pismo/#respond) [← Předchozí článek WordPress 5.7 „Esperanza“](https://www.wplama.cz/wordpress-5-7-esperanza/) [Další článek → Jak přidat ke komentáři ve WordPress možnost upozornění na odpověď](https://www.wplama.cz/jak-pridat-ke-komentari-ve-wordpress-moznost-upozorneni-na-odpoved/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Ostatní →](https://www.wplama.cz/wordpress/ostatni/) ![black friday wplama](https://www.wplama.cz/wp-content/uploads/2025/11/black-friday-wplama.png "black friday wplama") Ostatní ### [WordPress Black Friday 2025: Kupóny na slevy pluginů, šablon i služeb](https://www.wplama.cz/wordpress-black-friday/) 19. 11. 2025 6 min čtení --- ![black friday wplama](https://www.wplama.cz/wp-content/uploads/2025/11/black-friday-wplama.png "black friday wplama") Ostatní ### [BLACK FRIDAY SLEVA – 20 % na správu WordPress webu](https://www.wplama.cz/black-friday-sleva-20-na-spravu-wordpress-webu/) 18. 11. 2025 1 min čtení --- ![sureforms recenze pluginu scaled](https://www.wplama.cz/wp-content/uploads/2025/05/sureforms-recenze-pluginu-scaled.png "sureforms recenze pluginu scaled") Ostatní ### [SureForms – moderní plugin nejen pro tvorbu kontaktních formulářů ve WordPress](https://www.wplama.cz/sureforms-wordpress-kontaktni-formular/) 19. 5. 2025 12 min čtení ---