# Icons/SVGs in Firefox verschoben

**URL:** <https://forum.shopware.com/t/icons-svgs-in-firefox-verschoben/104624>\
**Category:** Themes & Design\
**Created:** [23. Juli 2024 um 13:32 UTC](https://forum.shopware.com/t/icons-svgs-in-firefox-verschoben/104624 "2024-07-23T13:32:56Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![maximilian.ehrhardt](https://avatars.discourse-cdn.com/v4/letter/m/6a8cbe/32.png) [@maximilian.ehrhardt](https://forum.shopware.com/u/maximilian.ehrhardt)\
**Post date:** [23. Juli 2024 um 13:32 UTC](https://forum.shopware.com/t/icons-svgs-in-firefox-verschoben/104624/1 "2024-07-23T13:32:56Z")

</div>

Hi Community,

die Buttons vom Standard Theme sind im Firefox schlecht positioniert.  
Zum Beispiel: Search Icon / + - Warenkorb / Pfeil Scrolltop / Slider Pfeile.

Beispiel aus der Demo:

> **[Hauptprodukt mit Eigenschaften | S | SWDEMO10007.1](https://demoshops.splendid-internet.de/shopware/demoshop-shopware6-daily/detail/01907311ed257197ab56edd022eb254a)**
>
> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea...

Im Chrome alles top. hat jemand einen simplen CSS Trick ?

---

<div class="post-metadata">

**Author:** ![zlep](https://avatars.discourse-cdn.com/v4/letter/z/9de0a6/32.png) [@zlep](https://forum.shopware.com/u/zlep)\
**Post date:** [23. Juli 2024 um 15:32 UTC](https://forum.shopware.com/t/icons-svgs-in-firefox-verschoben/104624/2 "2024-07-23T15:32:01Z")

</div>

Ja, nervt mich auch. Habe schon diverse CSS Anpassungen versucht, jedoch verschiebt es dann andere Icons oder Elemente.

---

<div class="post-metadata">

**Author:** ![hth](https://avatars.discourse-cdn.com/v4/letter/h/b77776/32.png) [@hth](https://forum.shopware.com/u/hth)\
**Post date:** [23. Juli 2024 um 17:07 UTC](https://forum.shopware.com/t/icons-svgs-in-firefox-verschoben/104624/3 "2024-07-23T17:07:27Z")

</div>

Die SVG-Grafik der Icons liegt immer in einem span-Tag, das in der Regel nicht die gesamte Höhe des Parents einnimmt. Dadurch kommt es im Firefox zu den Problemen. Richtig lösen kannst du es, indem du dieses Konstrukt im Template auflöst, die span dürften meistens überflüssig sein.

Im CSS kann du es z. B. für die Plus-Minus Icons so lösen, müsstest du aber noch mal im Safari testen.:

```auto
.icon-plus.icon-xs, .icon-minus.icon-xs{
    height: 100%;
}

.quantity-selector-group .btn-outline-light svg {
    top: 0;
}

```

Für die Lupe im Suchfeld:

```auto
.header-search-icon .icon.icon-search {
height: 100%
}

.header-search-icon .icon.icon-search svg {
top: 0;
}

tippe oder füge den Code hier ein

```