Come rendere bianche le icone SVG della Navbar?

Sviluppatore
1

Ciao. Sto usando Icone personalizzate dell’intestazione.
wwww

Vorrei che fossero bianche.

2

Sembra che il componente utilizzi un elemento con una classe custom-header-icon-link per contenere ciascuna icona. Se stai utilizzando icone svg, dovresti essere in grado di selezionarle in questo modo:

.custom-header-icon-link svg {
    stroke: white;
}

A volte le svg sembrano fatte di linee ma in realtà sono fatte di forme piene, quindi potresti dover cambiare stroke: white in fill: white.

1 Mi Piace
3

Ciao, provando entrambi continua ad apparire così:
wwww
Con il CSS che hai fornito, non è cambiato nulla.

5

Hmm, non sono sicuro di cosa stia succedendo lì! Potresti ricontrollare per assicurarti che le icone siano svg e non file di immagine. Potresti anche provare stroke: white !important; nel caso in cui ci sia qualche altro stile che lo sovrascrive.

Un “sanity test” che mi piace fare con il CSS quando sembra non fare nulla è aggiungere un background-color al selettore.

.custom-header-icon-link svg {
  background-color: pink;
  stroke: white;
}

In questo modo, se non vedi il colore di sfondo, il problema potrebbe essere che il selettore non sta puntando all’elemento giusto. In questo caso, lo strumento di ispezione del browser è davvero utile perché puoi guardare la gerarchia degli elementi e farti un’idea migliore di come dovrebbe essere scritto il selettore.

Con Chrome, puoi premere ctrl+shift+c e fare clic sull’icona per farla saltare a quell’elemento nell’elenco. Se vuoi pubblicare uno screenshot della scheda elementi, potremmo dare un’occhiata a come sono organizzate le cose. Ad esempio, ecco come appare per me quando provo il componente in anteprima:

image
image424×184 18.5 KB

6

Ci proverò quando sarò tornato a casa. Ho provato a far funzionare questa cosa per circa 8 ore :upside_down_face: il colore di sfondo era una delle cose che ho provato prima e ho pasticciato con Inspect Element all’infinito ma ancora non ha funzionato. Proverò la cosa “important” più tardi quando sarò a casa tra qualche ora e lascerò un aggiornamento! E sì, sono link .SVG al 100%.

7

Ah mann, das klingt frustrierend!

Eine weitere nützliche Technik zur Fehlerbehebung ist, Stile direkt im Inspektor auf das Element anzuwenden, um zu sehen, ob das funktioniert (verwende den Teil element.style im Tab „Stile“). Hinweis: Dies sind temporäre Änderungen, die nur das aktuelle Fenster betreffen und beim Aktualisieren gelöscht werden.

image
image592×155 21.2 KB

8

Ecco le mie icone e qui c’è l’elemento Ispeziona per esse:

bbbb
bbbb720×375 20.8 KB

Ho provato tutto il codice CSS che hai elencato, provando sia “stroke” che “fill”. Anche la cosa “!important” non ha funzionato. Non ho idea di cosa stia causando questo.
Potrei aver trovato qualcosa, però. Ho notato che anche se sto usando “immagini” .SVG, l’elemento Ispeziona le mostra ancora in un tag <img> VS <svg class=" che mostra il tuo. È un bug con Icone Intestazione Personalizzate?

9

Aha, sì, sembra che sia per questo che le modifiche non facevano nulla: non c’è un vero tag <svg>. Non penso che sia un bug che il componente lo inserisca in un tag <img>. Questo è solo uno dei modi per visualizzare un svg, ma rende più difficile stilizzarlo. Se hai accesso ai file svg stessi, puoi cambiare il tratto o il colore di riempimento lì (sarebbe un attributo come stroke="black", e potrebbero essercene più di uno).

Se non puoi modificare l’svg, potresti provare a usare i filtri CSS. Questi ti permettono di aggiungere determinati effetti visivi a un elemento. Poiché ora sembrano essere neri, potremmo provare a invertirli per ottenere il bianco.

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

Nota che ora il selettore deve essere img invece di svg

2 Mi Piace