# Warenkorb Icon durch .png Grafik austauschen

**URL:** <https://forum.shopware.com/t/warenkorb-icon-durch-png-grafik-austauschen/35000>\
**Category:** Themes & Design\
**Created:** [3. März 2016 um 12:56 UTC](https://forum.shopware.com/t/warenkorb-icon-durch-png-grafik-austauschen/35000 "2016-03-03T12:56:01Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![Florian\_Berlin](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@Florian\_Berlin](https://forum.shopware.com/u/Florian_Berlin)\
**Post date:** [3. März 2016 um 12:56 UTC](https://forum.shopware.com/t/warenkorb-icon-durch-png-grafik-austauschen/35000/1 "2016-03-03T12:56:01Z")

</div>

Hallo,

ich würde gerne das Warenkorb Icon durch eine Grafik austauschen.

Leider verrutscht die Grafik, wenn ich das

&nbsp;Element gegen ein

Element austausche.

Anbei ein Screenshot:

![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/0/09bb760d659cca1ffae87c7add2b897917693af4.jpeg)

Hat das schon jemand so umgesetzt?

```
{* Cart entry *}
{block name="frontend_index_checkout_actions_cart"}
	
		
			
				{if $sUserLoggedIn}
					{s name='IndexLinkCheckout' namespace='frontend/index/checkout_actions'}{/s}
				{else}
					{s namespace='frontend/index/checkout_actions' name='IndexLinkCart'}{/s}
				{/if}
			

            {$sBasketQuantity}

            

			
				{$sBasketAmount|currency} {s name="Star" namespace="frontend/listing/box_article"}{/s}
			
		
		 
	
{/block}

```

PS: Anbei nochmal mein aktueller Code:

&nbsp;

&nbsp;

Vielen Dank

Flo

---

<div class="post-metadata">

**Author:** ![Heiner\_Lohaus](https://avatars.discourse-cdn.com/v4/letter/h/b5a626/32.png) [@Heiner\_Lohaus](https://forum.shopware.com/u/Heiner_Lohaus)\
**Post date:** [3. März 2016 um 13:18 UTC](https://forum.shopware.com/t/warenkorb-icon-durch-png-grafik-austauschen/35000/2 "2016-03-03T13:18:11Z")

</div>

Hi Flo,

ich würde es einfach per CSS umsetzten. Beispiel:

```
.icon--basket {
   background-color: red;
   width: 30px;
   height: 30px;
}
.icon--basket:before {
   content: " ";
}

```

Das sollte schon den gewünschten Effekt haben.  
Und statt “background-color” kannst du natürlich auch ein “background-image” setzen.

Viele Grüße Heiner

&nbsp;

---

<div class="post-metadata">

**Author:** ![Florian\_Berlin](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@Florian\_Berlin](https://forum.shopware.com/u/Florian_Berlin)\
**Post date:** [3. März 2016 um 13:51 UTC](https://forum.shopware.com/t/warenkorb-icon-durch-png-grafik-austauschen/35000/3 "2016-03-03T13:51:57Z")

</div>

Hi Heiner,

wiso schwer, wenn es auch einfach geht.

Vielen Dank

Flo

---

<div class="post-metadata">

**Author:** ![Florian\_Berlin](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@Florian\_Berlin](https://forum.shopware.com/u/Florian_Berlin)\
**Post date:** [3. März 2016 um 13:59 UTC](https://forum.shopware.com/t/warenkorb-icon-durch-png-grafik-austauschen/35000/4 "2016-03-03T13:59:00Z")

</div>

Kleine Ergänzung:

Mit dem oben gennanten Code wird die Anzahl der Artikel falsch dargestellt:

![](https://europe1.discourse-cdn.com/flex013/uploads/shopware/original/2X/e/ec60c1e562d79090e65338eee1f8f4db96e1ef2d.jpeg)

Das lässt sich mit&nbsp;

```
.badge.is--primary {
    width: inherit !important;
	}

```

beheben.

---

<div class="post-metadata">

**Author:** ![Florian\_Berlin](https://avatars.discourse-cdn.com/v4/letter/f/b38774/32.png) [@Florian\_Berlin](https://forum.shopware.com/u/Florian_Berlin)\
**Post date:** [15. März 2016 um 16:50 UTC](https://forum.shopware.com/t/warenkorb-icon-durch-png-grafik-austauschen/35000/5 "2016-03-15T16:50:08Z")

</div>

Hi [@Heiner Lohaus]([http://forum.shopware.com/profile/63/Heiner](http://forum.shopware.com/profile/63/Heiner) Lohaus “Heiner Lohaus”)‍,

mir ist gerade aufgefellan, dass das background-image nur auf Desktop Größe dargestellt wird und nicht bei Tablet und Mobile.

Ich habe lediglich das oben ganannte CSS benutzt und schon einiges probiert, leider alles ohne Erfolg bisher.

Hast du vielleicht für diese Problematik noch&nbsp;einen Hinweis?

Vielen Dank&nbsp;

Flo&nbsp;

---

<div class="post-metadata">

**Author:** ![Anidni](https://avatars.discourse-cdn.com/v4/letter/a/d6d6ee/32.png) [@Anidni](https://forum.shopware.com/u/Anidni)\
**Post date:** [18. Mai 2016 um 15:04 UTC](https://forum.shopware.com/t/warenkorb-icon-durch-png-grafik-austauschen/35000/6 "2016-05-18T15:04:47Z")

</div>

Moin,

ich würde das gern aufgreifen - gibt es eine Lösung für&nbsp;Flo’s Frage bezüglich Tablet und phone?

Danke.