Shopware Font Icons durch eigene SVG ersetzen

Shopware 5 Themes & Design
1

Hi zusammen,

ich habe ein paar wenige eigene SVG Icons, welche ich gerne in unserem Shop verwenden möchte (Herz, Lupe, Warenkorb… sowas). Wie kann ich die Icons aus der Shopware Icon Font durch diese ersetzen - ohne dafür nochmal eine eigene Icon Font einzubinden? Ich hab dazu leider noch nirgends eine Lösung gefunden.

Danke!

Gruß

Michael

2

Hi,

Ich habe die Font nicht verändert sondern die Font durch SVGs ersetzt.

 In der /themes/Frontend/DeinTheme/widgets/checkout/ info.tpl beispielsweise habe ich

durch folgendes ersetzt

 Dann habe ich noch folgendes in /themes/Frontend/DeinTheme/frontend/_public/src/less/ all.less hinzugefügt:

.svgicon {
padding-left: 0px;
  display: inline-block;
  width: 40px;
  height: 40px;
  background-size: cover;
  background: none;
}

.svgicon-heart {
  background-image: url(/themes/Frontend/DeinTheme/frontend/_public/src/img/icons/x-heart.svg);
}
.svgicon-heart:hover,
.svgicon-heart:focus,
.svgicon-heart:active,
.svgicon-heart:checked{
  background-image: url(/themes/Frontend/DeinTheme/frontend/_public/src/img/icons/x-heart-color.svg);
}

Solltest du kein Hover-Effekt haben wollen kannst du das untere einfach weg lassen. Auch kann das SVG an einer beliebigen Stelle liegen

Das Prinzip lässt sich natürlich für alle Icons wiederholen.

 

1 „Gefällt mir“
3

Hi @graumatic,

vielen Dank für den Denkanstoss. :slight_smile:

Hover Farbwechsel brauch ich zwar jetzt nicht, aber ist vielleicht auch etwas für dich um das zweite SVG zu sparen: mit dem Filter-CSS-Attribut arbeiten.

Ein blaues Icon bekomme ich z. B. damit:

.svg-blue {

filter: invert(74%) sepia(57%) saturate(3887%) hue-rotate(154deg) brightness(96%) contrast(88%);

-webkit-filter: invert(74%) sepia(57%) saturate(3887%) hue-rotate(154deg) brightness(96%) contrast(88%);

}

Grüße!

4

filter: invert(74%) sepia(57%) saturate(3887%) hue-rotate(154deg) brightness(96%) contrast(88%);

-webkit-filter: invert(74%) sepia(57%) saturate(3887%) hue-rotate(154deg) brightness(96%) contrast(88%); 

 Hi, das ist ja eine super Sache! Vielen Dank für den Tipp.

Ich habe das mit den 2 SVGs gemacht, weil ich die Filterfunktion nicht kannte

Gruß