# Icons in Navigation neben Kategorienamen **URL:** \ **Category:** Themes & Design\ **Created:** [5. Oktober 2015 um 17:00 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123 "2015-10-05T17:00:22Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![bingoo](https://avatars.discourse-cdn.com/v4/letter/b/f6c823/32.png) [@bingoo](https://forum.shopware.com/u/bingoo)\ **Post date:** [5. Oktober 2015 um 17:00 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/1 "2015-10-05T17:00:22Z")
Hallo, wie kann ich es hinbiegen, dass ich neben den den Namen in der Navigation noch individuelle Icons einbinden kann? Beispielhaft bei zooroyal (die nutzen ja auch Shopware). Hab schon hin und her überlegt, finde aber keinen 100%igen Ansatz. Hat wer von euch eine Idee? ---
**Author:** ![useg](https://avatars.discourse-cdn.com/v4/letter/u/df705f/32.png) [@useg](https://forum.shopware.com/u/useg)\ **Post date:** [5. Oktober 2015 um 18:54 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/2 "2015-10-05T18:54:31Z")
> [@bingoo](#): > > Hallo, wie kann ich es hinbiegen, dass ich neben den den Namen in der Navigation noch individuelle Icons einbinden kann? Beispielhaft bei zooroyal (die nutzen ja auch Shopware). Hab schon hin und her überlegt, finde aber keinen 100%igen Ansatz. Hat wer von euch eine Idee? ---
**Author:** ![bingoo](https://avatars.discourse-cdn.com/v4/letter/b/f6c823/32.png) [@bingoo](https://forum.shopware.com/u/bingoo)\ **Post date:** [5. Oktober 2015 um 23:05 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/3 "2015-10-05T23:05:53Z")
Hallo Uwe, danke für den Hinweis. Mit dem anderen Beitrag sollte das klappen…war da nur etwas abgeschreckt weil für sw4 und die tpl eine andere/nicht identisch ist. Falls mal wer vor der Frage steht: Bei SW5 muss man hier die main-navigation.tpl nehmen ---
**Author:** ![AutoFrau](https://avatars.discourse-cdn.com/v4/letter/a/dec6dc/32.png) [@AutoFrau](https://forum.shopware.com/u/AutoFrau)\ **Post date:** [11. März 2016 um 17:38 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/4 "2016-03-11T17:38:14Z")
@bingoo‍ Hast Du das bei SW5 hinbekommen? Hätte das auch gern so, aber das von SW4 schaut doch so ganz anders aus auf die main-navigation.tpl bei SW5?! 😕 LG, Nicole ---
**Author:** ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)\ **Post date:** [11. März 2016 um 18:00 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/5 "2016-03-11T18:00:55Z")
Das geht per CSS / Less 1. Variante (so habe ich es) In der main-navigation.tpl dem li element noch eine klasse mit der Kategorie-ID übergeben und per Less / CSS bei Bedarf eine entsprechende class für die Kategorie erstellen 2. Variante per selector nth-child() per Less / CSS der festen Tabposition etwas zuweisen.   Vorteil Variante 1: Man kann die Position im Menu ändern Vorteil Variante 2: Man muss die main-navigation.tpl nicht anpassen. ---
**Author:** ![Gesundwuerzen](https://avatars.discourse-cdn.com/v4/letter/g/8c91f0/32.png) [@Gesundwuerzen](https://forum.shopware.com/u/Gesundwuerzen)\ **Post date:** [12. März 2016 um 10:45 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/6 "2016-03-12T10:45:17Z")
> 1. Variante per selector nth-child() per Less / CSS der festen Tabposition etwas zuweisen. Da werde ich nicht schlau draus. Wie und wo hast du das eingefügt?  ---
**Author:** ![AutoFrau](https://avatars.discourse-cdn.com/v4/letter/a/dec6dc/32.png) [@AutoFrau](https://forum.shopware.com/u/AutoFrau)\ **Post date:** [13. März 2016 um 19:21 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/7 "2016-03-13T19:21:22Z")
Mich würde die erste Variante interessieren. Wie mache ich das? ---
**Author:** ![Sascha\_Kertz](https://avatars.discourse-cdn.com/v4/letter/s/ccd318/32.png) [@Sascha\_Kertz](https://forum.shopware.com/u/Sascha_Kertz)\ **Post date:** [14. März 2016 um 08:51 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/8 "2016-03-14T08:51:19Z")
Hi, ich selbst habe das so gelöst. In diesem Fall habe ich der Startseite ein „Haus Icon“ gegeben (Font Awesome vorher einbinden). Wichtig, das beispiel gilt nur für das Erste Listenelement weil hier eine Klasse „is–first“ übergeben wird. Da bei den anderen Menupunkten keine weiteren speziellen Klassen übergeben werden an die man sich andocken könnte, muss das wie bereits geantwortet wurde per nth-child()  gelöst werden. ![](http://www.bilder-upload.eu/upload/fdad9d-1457947031.png) ``` .navigation--link.is--first span:before { font-family: FontAwesome; content: "\f015"; float: left; top: 2px; position: relative; margin-right: 5px; } ```       ---
**Author:** ![sonic](https://dub1.discourse-cdn.com/flex013/user_avatar/forum.shopware.com/sonic/32/25728_2.png) [@sonic](https://forum.shopware.com/u/sonic)\ **Post date:** [14. März 2016 um 09:03 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/9 "2016-03-14T09:03:13Z")
``` {extends file='parent:frontend/index/main-navigation.tpl'} {block name='frontend_index_navigation_categories_top_entry'} {strip} {if !$sCategory.hidetop} {$sCategory.description} {/if} {/strip} {/block} ``` Block vom Bare in die eigene index/main-navigation.tpl kopieren und das li-element um eine Klasse für die Kategorie erweitern. In meinem Beispiel wäre die Klasse “navigation–itemid–IDNR”. Die IDNR steht dann für die jeweiligen System-ID der Kategorie aus dem backend. Nur nach einem Update auch ins original-Bare gucken, ob sich dieser Block verändert hat und ggf. im eigenem Template anpassen. Nun aber bitte Eigeninitiative wie man es per CSS mit Less umsetzt. ---
**Author:** ![steinsoftware](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@steinsoftware](https://forum.shopware.com/u/steinsoftware)\ **Post date:** [15. März 2016 um 09:00 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/10 "2016-03-15T09:00:56Z")
font awesome braucht man meist gar nicht. siehe Shopware-font hier: [https://developers.shopware.com/styletile/\_components-icon-set.html](https://developers.shopware.com/styletile/_components-icon-set.html) icon–house ---
**Author:** ![AutoFrau](https://avatars.discourse-cdn.com/v4/letter/a/dec6dc/32.png) [@AutoFrau](https://forum.shopware.com/u/AutoFrau)\ **Post date:** [15. März 2016 um 14:32 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/11 "2016-03-15T14:32:38Z")
> [@sonic schrieb:](https://forum.shopware.com/profile/16285/sonic "sonic") > >   > > Nun aber bitte Eigeninitiative wie man es per CSS mit Less umsetzt. ![Wink](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/1X/b3785da0cbf2c8566cb535dcf55b2730b5224899.png "Wink")   Oh je… Da werde ich dieses Vorhaben erstmal zurück stellen müssen. ☹ Ich habe noch nie mit Less gearbeitet. Wenn ich mich da jetzt erst reinarbeiten muss, krieg ich den Shop nie fertig.  Ich mach dann jetzt erstmal alles andere fertig und schau dann mal weiter. Aber danke für den Ansatz. Vielleicht hilft er mir ja. ---
**Author:** ![AutoFrau](https://avatars.discourse-cdn.com/v4/letter/a/dec6dc/32.png) [@AutoFrau](https://forum.shopware.com/u/AutoFrau)\ **Post date:** [21. März 2016 um 19:30 UTC](https://forum.shopware.com/t/icons-in-navigation-neben-kategorienamen/31123/12 "2016-03-21T19:30:45Z")
Ich hab mir jetzt ein Plugin dafür heruntergeladen. Falls es noch jemanden interessiert, wie man das hinbekommt, wenn man selbst null Ahnung davon hat: damit klappt es super: > **[Erweitertes Menü mit Grafiken + Dropdown "sticky"](https://store.shopware.com/wolf00402/erweitertes-menue-mit-grafiken-dropdown-sticky.html)** > > Ein Bild sagt mehr als 1.000 Worte Zeigen Sie auf einen Blick, was Sie in den Kategorien bieten. Während im normalen Dropdown bei Shopware 5…