Warenkorb Icon durch .png Grafik austauschen

Hallo,

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

Leider verrutscht die Grafik, wenn ich das

 Element gegen ein

Element austausche.

Anbei ein Screenshot:

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:

 

 

Vielen Dank

Flo

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

 

1 „Gefällt mir“

Hi Heiner,

wiso schwer, wenn es auch einfach geht.

Vielen Dank

Flo

Kleine Ergänzung:

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

Das lässt sich mit 

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

beheben.

Hi [@Heiner Lohaus](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 einen Hinweis?

Vielen Dank 

Flo 

Moin,

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

Danke.