# Wie mache ich Navbar SVG-Icons weiß?

**URL:** <https://meta.discourse.org/t/how-to-make-navbar-svg-icons-white/301003>\
**Category:** Development\
**Tags:** css\
**Created:** [26. März 2024 um 14:20 UTC](https://meta.discourse.org/t/how-to-make-navbar-svg-icons-white/301003 "2024-03-26T14:20:46Z")\
**Posts on this page:** 1\
**Showing post:** 9

<div class="post-metadata">

**Author:** ![bryce](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/bryce/32/377822_2.png) [@bryce](https://meta.discourse.org/u/bryce)\
**Post date:** [27. März 2024 um 02:02 UTC](https://meta.discourse.org/t/how-to-make-navbar-svg-icons-white/301003/9 "2024-03-27T02:02:54Z")

</div>

> [@45thj5ej](#):
>
> Mir ist aufgefallen, dass, obwohl ich .SVG-„Bilder“ verwende, die Elementinspektion sie immer noch in einem img-Tag anzeigt, im Gegensatz zu dem \<svg class=" , das Ihres anzeigt.

Aha, ja, es sieht so aus, als ob das der Grund ist, warum die Änderungen nichts bewirkt haben – es gibt kein tatsächliches `<svg>`-Tag. Ich glaube nicht, dass es ein Fehler ist, dass die Komponente es in ein `<img>`-Tag gesetzt hat. Das ist nur eine der Möglichkeiten, eine SVG anzuzeigen, aber es macht das Styling schwieriger. Wenn Sie Zugriff auf die SVG-Dateien selbst haben, können Sie dort die Strich- oder Füllfarbe ändern (es wäre ein Attribut wie `stroke="black"`, und es könnte mehr als eines geben).

Wenn Sie die SVG nicht bearbeiten können, können Sie versuchen, CSS-Filter zu verwenden. Diese ermöglichen es Ihnen, bestimmte visuelle Effekte zu einem Element hinzuzufügen. Da sie jetzt schwarz erscheinen, könnten wir versuchen, sie zu invertieren, um weiß zu erhalten.

```plaintext
.custom-header-icon-link img {
  filter: invert(100%);
}

```

_Beachten Sie, dass der Selektor jetzt img anstelle von svg sein muss_

---

_[View the full topic](https://meta.discourse.org/t/how-to-make-navbar-svg-icons-white/301003)._