Shopware Font Icons durch eigene SVG ersetzen

Shopware 5 Themes & Design
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“