--- 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 přidat vlastní ikonu do šablony Divi url: https://www.wplama.cz/jak-pridat-vlastni-ikonu-divi/ date: 2016-07-14 modified: 2016-07-13 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [Divi, Elegant Themes, ikona] --- Divi šablona a Elegant Themes # Jak přidat vlastní ikonu do šablony Divi [TC **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 14. 7. 2016 1 min čtení Pozor: Článek je z roku 2016. Některé postupy se mohly změnit. ![inovace](https://www.wplama.cz/wp-content/uploads/2016/07/inovace.jpg "inovace") Obsah článku (2 kapitoly) 1. [Přidání ikony pomocí modulu Upoutávka](https://www.wplama.cz/jak-pridat-vlastni-ikonu-divi/#pridani-ikony-pomoci-modulu-upoutavka) 2. [Přidání vlastní ikony manuálně](https://www.wplama.cz/jak-pridat-vlastni-ikonu-divi/#pridani-vlastni-ikony-manualne) Šablona Divi obsahuje předpřipravený **seznam ikon**, které jsou použité v různých modulech, například v modulu Upoutávka. Tyto ikony jsou ve skutečnosti písmo vytvořené studiem [Elegant Themes](https://www.wplama.cz/wordpressovy-specialista-elegant-themes/) a není žádný přímý způsob jak přidat nové znaky. Naštěstí je zde ale **způsob jak přidat vlastní ikonu** do seznamu. V tomto článku si ukážeme dva způsoby jak přidat vlastní ikonu do [Divi šablony](https://www.wplama.cz/divi-sablona/). [![Divi modul Upoutávka](https://www.wplama.cz/wp-content/uploads/2016/07/divi-modul-upoutavka-1024x472.png "Divi modul Upoutávka")](https://www.wplama.cz/wp-content/uploads/2016/07 / divi-modul-upoutavka.png) Divi modul Upoutávka ## Přidání ikony pomocí modulu Upoutávka Nejprve si otevřete nastavení modulu Upoutávka a u položky **Použít ikonu vyberte možnost Ne**. Zobrazí se vám nabídka na nahrání obrázku a napsání jeho alternativního názvu (pro SEO). Obojí vyplňte. Nakonec jen modul a stránku uložte. [![Nastavení modulu Upoutávka](https://www.wplama.cz/wp-content/uploads/2016/07/nastaveni-modulu-upoutavka.jpg "Nastavení modulu Upoutávka")](https://www.wplama.cz/wp-content/uploads/2016/07 / nastaveni-modulu-upoutavka.jpg) Nastavení modulu Upoutávka ## Přidání vlastní ikony manuálně Nejprve je nutné vytvořit dva soubory ikonky o různých velikostech. Doporučuji**rozměry 16×16 a 96×96 pixelů**. Nyní je třeba menší z ikon přidat do seznamu výběru ikonek v modulu Upoutávka. Uděláte to pomocí kódu níže, který vložíte do *functions.php* ve vaší šabloně. K úpravě doporučuji využít [child theme](https://www.wplama.cz/vytvorit-child-sablonu/). ``` function myfont_icons($icons) { $icons[] = 'mojeikona'; return $icons; } add_filter('et_pb_font_icon_symbols', 'myfont_icons'); function my_custom_fonts() { ?> [data-icon="mojeikona"]::before { background: url('http://www.vasestranky.cz/ikona-mala.png'); content:'a' !important; width:16px !important; height:16px !important; color:rgba(0,0,0,0) !important; } Nezapomeňte upravit URL vaší ikony. Kód vytvoří ikonu nazvanou "mojeikona" a přidá ji do seznamu ikonek v Divi modulu Upoutávka. Pokud se podíváte do modulu Upoutávka, uvidíte seznam ikon a na konci by měla být ta vaše. Vlastní ikona v seznamu Nyní ještě zbývá přidat větší ikonu při zobrazení modulu na stránce. To uděláte pomocí kódu níže. Opět kód vložte do functions.php ve vaší šabloně. Zase nezapomeňte upravit URL ikonky. function my_custom_fonts_js() { ?> j Query('.et-pb-icon').filter(function(){ return j Query(this).text() == 'mojeikona'; }).html(''); To je vše. V seznamu ikonek modulu Upoutávka je přidaná nová šablona. Takto to vypadalo v mém případě, kdy jsem přidával ikonu karavanu. Vlastní ikona na stránce ``` - [#Divi](https://www.wplama.cz/stitek/divi/) - [#Elegant Themes](https://www.wplama.cz/stitek/elegant-themes/) - [#ikona](https://www.wplama.cz/stitek/ikona/) Sdílet - - [](mailto:?subject=Jak přidat vlastní ikonu do šablony Divi&body=Jak přidat vlastní ikonu do šablony Divi https://www.wplama.cz/jak-pridat-vlastni-ikonu-divi/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fjak-pridat-vlastni-ikonu-divi%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fjak-pridat-vlastni-ikonu-divi%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 035 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře Zatím tu nikdo nekomentoval. Napište první komentář. ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/jak-pridat-vlastni-ikonu-divi/#respond) [← Předchozí článek Kvalitní obrázky zdarma ke stažení a k jakýmkoliv účelům](https://www.wplama.cz/kvalitni-obrazky-zdarma-ke-stazeni/) [Další článek → Kapitola 6 – První vývojáři WordPressu](https://www.wplama.cz/prvni-vyvojari-wordpress/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Divi šablona a Elegant Themes →](https://www.wplama.cz/wordpress/divi-elegant-themes/) ![kombinovatelne nastaveni](https://www.wplama.cz/wp-content/uploads/2026/04/kombinovatelne-nastaveni.png "kombinovatelne nastaveni") Divi šablona a Elegant Themes ### [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) 13. 4. 2026 2 min čtení --- ![command center](https://www.wplama.cz/wp-content/uploads/2026/03/command-center.png "command center") Divi šablona a Elegant Themes ### [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) 7. 4. 2026 4 min čtení --- ![spekulativni prerendering](https://www.wplama.cz/wp-content/uploads/2026/03/spekulativni-prerendering.png "spekulativni prerendering") Divi šablona a Elegant Themes ### [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) 30. 3. 2026 3 min čtení ---