Eigenes png als Icon (Warenkorb, Benutzerkonto, Merkzettel)

Shopware 5 Themes & Design
1

Hallo zusammen.

Zu der Frage habe ich natürlich auch die Suche bemüht.

Ich zitiere hier [@Heiner Lohaus](http://forum.shopware.com/profile/63/Heiner Lohaus “Heiner Lohaus”)‍ aus einem ähnlichem Beitrag. (https://forum.shopware.com/discussion/35492/warenkorb-icon-durch-png-grafik-austauschen)

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

Leider hat das bei mir den Effekt, dass gar nichts mehr angezeigt wird. Weder die background-color noch ein -image wird hier angezeigt.
Sobald content: " "; übergeben wird, werden alle Änderungen vergessen. Ohne content: " "; wird zwar mein Bild angezeigt, aber das normale Icon wird als content einfach darüber gelegt.

Da der Beitrag auch schon etwas her ist und sich da evtl. etwas getan hat, würde ich mich freuen nochmals von euch zu hören.

Wie bekomme ich eine eigene png hier als Icon angezeigt? Divserse Versuche per .less sind leider gescheitert.

Danke

2

Versuche mal 

content: " ";

Viele Grüße

3

Hallo.

Leider zeigt er mir bei " " genau   als “Icon” bzw Text an und alles, was ich bei .icon–basket eingetragen habe wird immer noch nicht angezeigt.
 

Vielleicht noch eine andere Idee?

 

Danke

4

Hey,

wenn Du das bestehende Font-Icon einfach nur ausblenden willst, geht das so:

.icon--basket:before {
    content: none;
    display: none;
}

 

Sonnige Grüße,
Phil

5

Hallo,

wie hier schon erwähnt könntest du das bestehende Icon “ausblenden”, beispielsweise über:

.shop--navigation .navigation--entry.entry--cart .icon--basket::before {
    content: "";
}

und dann beispielsweise dich an das “< li >” - Element hängen und dort einen Background mit einem neuen Bild hinterlegen, beispielsweise über:

.shop--navigation .navigation--entry.entry--cart {
    background: rgba(0,0,0,0) url("pfad_zu_meinem_png_icon") no-repeat scroll .375rem .375rem;
    height: 2.125rem;
}

Die ganzen CSS-Anweisungen solltest du natürlich in einer eigenen LESS-Datei deines eigenen Themes ablegen, damit dann auch die Pfade etc passen. Die von mir angesprochene Lösung funktioniert so auch.

Beste Grüße

Sebastian

6

Hallo nochmal und vielen Dank für die Hilfreichen Tipps!

Habe jetzt den Vorschlag gemäßg von @sschreier‍ benutzt und das Funktioniert wunderbar!!

 

Vielen Dank