# Wie kann ich dem &lt;li&gt; List-Style ein eigenes Bild zuweisen?

**URL:** <https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823>\
**Category:** Themes & Design\
**Created:** [21. August 2015 um 11:30 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823 "2015-08-21T11:30:52Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tanny](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tanny](https://forum.shopware.com/u/Tanny)\
**Post date:** [21. August 2015 um 11:30 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/1 "2015-08-21T11:30:52Z")

</div>

Hallo Fachwelt, kann ich in SW5 dem

- List Style ein eigenes Bild zuweisen? Ich hätte gerne statt dem “disc” ein Haken (eigenes Image) der Auflistung vorangestellt. Danke im Voraus. Grüße Michael

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [21. August 2015 um 12:15 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/2 "2015-08-21T12:15:33Z")

</div>

Welche Auflistung, wo ? Generell geht das natürlich, klar. Mit einer eigenen CSS Klasse und deinem Image, oder einem entsprechenden Icon von den Shopware Fonts, oder Fontawesome oder oder oder 🙂

---

<div class="post-metadata">

**Author:** ![Tanny](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tanny](https://forum.shopware.com/u/Tanny)\
**Post date:** [21. August 2015 um 12:29 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/3 "2015-08-21T12:29:37Z")

</div>

In der Artikeldetail-Beschreibung im Editor. Gibt es dafür ein eigenes Shopware Fond Icon als Haken? Danke

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [21. August 2015 um 12:36 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/4 "2015-08-21T12:36:08Z")

</div>

[quote=“Tanny”]In der Artikeldetail-Beschreibung im Editor. Gibt es dafür ein eigenes Shopware Fond Icon als Haken? Danke[/quote] Im Editor selbst wird es etwas schwierig, da der Editor fonts raus löscht bzw. eben die oder _Tags. Schau mal hier ist die Shopware Font: [https://s3.eu-central-1.amazonaws.com/s … index.html](https://s3.eu-central-1.amazonaws.com/shopwareicons/index.html)_

---

<div class="post-metadata">

**Author:** ![Tanny](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tanny](https://forum.shopware.com/u/Tanny)\
**Post date:** [21. August 2015 um 12:39 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/5 "2015-08-21T12:39:50Z")

</div>

Danke! Na das “icon–check” wäre doch genau das richtige. Nur bekommt man das anstatt z.B. “disc” in die Artikelbeschreibung?

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [21. August 2015 um 12:46 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/6 "2015-08-21T12:46:15Z")

</div>

[quote=“Tanny”]Danke! Na das “icon–check” wäre doch genau das richtige. Nur bekommt man das anstatt z.B. “disc” in die Artikelbeschreibung?[/quote] Kommt die gesamte Artikel Beschreibung aus dem Text Editor? Falls ja müsstest du diesen anpassen, sodass er hier die entsprechenden Elemente nicht raus löscht. Ist ein wenig tricky. Oder geht es um die Artikel properties ? (Mir fällt gerade nicht das deutsche Wort dafür ein). Also um diese zusätzliche Artikel Details, welche in einer Liste aufgeführt werden.

---

<div class="post-metadata">

**Author:** ![Tanny](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tanny](https://forum.shopware.com/u/Tanny)\
**Post date:** [21. August 2015 um 12:58 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/7 "2015-08-21T12:58:32Z")

</div>

[quote=„kayyy“]Kommt die gesamte Artikel Beschreibung aus dem Text Editor? Falls ja müsstest du diesen anpassen, sodass er hier die entsprechenden Elemente nicht raus löscht. Ist ein wenig tricky.[/quote] Ja, kommt aus dem Editor. (Woher auch sonst? Gibt es noch eine Möglichkeit Beschreibung einzufügen?) [quote=„kayyy“]Oder geht es um die Artikel properties ? (Mir fällt gerade nicht das deutsche Wort dafür ein). Also um diese zusätzliche Artikel Details, welche in einer Liste aufgeführt werden.[/quote] Du meinst die Artikel-Eigenschaften 🙂 Nein es geht nur um in der Artikelbeschreibung statt z.B. „disc“ oder „circle“ einen Haken zu haben bei einer Auflistung… In einem anderen Shop (nicht Shopware) konnte ich das mit einem Eintrag in der CCS so lösen: `ul.beschreibung-nude,ul.beschreibung-nude li{list-style-image:url(img/haken\_nude\_bg.gif);margin-left:10px;padding-left:2px;}` Ich habe dir eine PN gesandt

---

<div class="post-metadata">

**Author:** ![Shopwareianer](https://avatars.discourse-cdn.com/v4/letter/s/b4bc9f/32.png) [@Shopwareianer](https://forum.shopware.com/u/Shopwareianer)\
**Post date:** [21. August 2015 um 13:03 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/8 "2015-08-21T13:03:56Z")

</div>

Klar, du kannst dem

- in der Artikelbeschreibung auch direkt ein globales Image verpassen. Du kannst hier auch die Shopware Font nehmen und dir den haken als .svg Image abspeichern, oder ben als .png oder was auch immer und dann dem
- ein background-image verpassen, ein list-style:none und ein padding-left. Schwups hast du in der Beschreibung deinen Haken (global) in allen Artikel Beschreibungen.

---

<div class="post-metadata">

**Author:** ![Tanny](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tanny](https://forum.shopware.com/u/Tanny)\
**Post date:** [21. August 2015 um 13:21 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/9 "2015-08-21T13:21:42Z")

</div>

[quote=„kayyy“]… Du kannst hier auch die Shopware Font nehmen und dir den haken als .svg Image abspeichern, oder ben als .png oder was auch immer und dann dem

- ein background-image verpassen, ein list-style:none und ein padding-left. Schwups hast du in der Beschreibung deinen Haken (global) in allen Artikel Beschreibungen.[/quote] Wo muss das denn gespeichert werden, damit ich statt „disc“ einen Shopware-Font-Haken habe? Und könnte das so gespeichert werden, dass ich im Editor-Quelltext evtl. durch ändern des Code für  
-List bei einem Artikel den Haken und bei einem anderen Artikel die normale „disc“ habe? Danke

---

<div class="post-metadata">

**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\
**Post date:** [21. August 2015 um 13:43 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/10 "2015-08-21T13:43:42Z")

</div>

[quote=“Tanny”][quote=“kayyy”]… Du kannst hier auch die Shopware Font nehmen und dir den haken als .svg Image abspeichern, oder ben als .png oder was auch immer und dann dem

- ein background-image verpassen, ein list-style:none und ein padding-left. Schwups hast du in der Beschreibung deinen Haken (global) in allen Artikel Beschreibungen.[/quote] Wo muss das denn gespeichert werden, damit ich statt “disc” einen Shopware-Font-Haken habe? Und könnte das so gespeichert werden, dass ich im Editor-Quelltext evtl. durch ändern des Code für  
-List bei einem Artikel den Haken und bei einem anderen Artikel die normale “disc” habe? Danke[/quote] in deinen CSS Dateien die in LESS einbindest. Wenn du beides haben willst nutze weitere Klassen dafür. Für alle `ul { list-style-image: url('sqpurple.gif'); }` none Klasse `.bezeichner{ list-style-image: none; }`

---

<div class="post-metadata">

**Author:** ![Tanny](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tanny](https://forum.shopware.com/u/Tanny)\
**Post date:** [22. August 2015 um 10:05 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/11 "2015-08-22T10:05:29Z")

</div>

[quote=“benblub”]…in deinen CSS Dateien die in LESS einbindest. Wenn du beides haben willst nutze weitere Klassen dafür. Für alle `ul { list-style-image: url('sqpurple.gif'); }` none Klasse `.bezeichner{ list-style-image: none; }`[/quote] Danke! Aber wo kommt denn was genau hin…? :oops:

---

<div class="post-metadata">

**Author:** ![benblub](https://avatars.discourse-cdn.com/v4/letter/b/ebca7d/32.png) [@benblub](https://forum.shopware.com/u/benblub)\
**Post date:** [22. August 2015 um 15:51 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/12 "2015-08-22T15:51:01Z")

</div>

Das hängt davon ab wo du es haben möchtest. Vordefinierte List Klassen [https://developers.shopware.com/styleti … lists.html](https://developers.shopware.com/styletile/%5C_components-lists.html) entweder haust dir in im eigenen Template in \_components eine lists.less rein oder machst dir nen eigenen ordner und haust da deine LESS Files rein mit eigenen Bezeichern wie myListStyles.less z.B.

---

<div class="post-metadata">

**Author:** ![Tanny](https://avatars.discourse-cdn.com/v4/letter/t/dfb087/32.png) [@Tanny](https://forum.shopware.com/u/Tanny)\
**Post date:** [22. August 2015 um 18:17 UTC](https://forum.shopware.com/t/wie-kann-ich-dem-lt-li-gt-list-style-ein-eigenes-bild-zuweisen/29823/13 "2015-08-22T18:17:25Z")

</div>

[quote=„benblub“]…Vordefinierte List Klassen [https://developers.shopware.com/styleti … lists.html](https://developers.shopware.com/styletile/%5C_components-lists.html) …[/quote] Vielen Dank für den Hinweis mit den vordefinierten List-Klassen! Da habe ich schon was ich brauche! Danke 🙂
