Hallo. Ich verwende die Custom Header Icons Komponente.
Ich hätte diese gerne weiß.
Es sieht so aus, als ob die Komponente ein Element mit der Klasse custom-header-icon-link verwendet, um jedes Symbol zu umschließen. Wenn Sie SVG-Symbole verwenden, sollten Sie diese wie folgt ansprechen können:
.custom-header-icon-link svg {
stroke: white;
}
Manchmal sehen SVGs so aus, als wären sie aus Linien gemacht, aber tatsächlich bestehen sie aus ausgefüllten Formen. Daher müssen Sie möglicherweise stroke: white in fill: white ändern.
1 „Gefällt mir“
Hallo, wenn ich beides versuche, sehen sie immer noch so aus:
Mit dem von Ihnen bereitgestellten CSS hat sich nichts geändert.
Hmm, ich bin mir nicht sicher, was da los ist! Sie könnten noch einmal überprüfen, ob die Symbole SVGs und keine Bilddateien sind. Sie könnten auch stroke: white !important; versuchen, falls etwas anderes die Darstellung überschreibt.
Ein “Sanity Test”, den ich gerne mit CSS mache, wenn es scheinbar nichts tut, ist, eine Hintergrundfarbe für den Selektor hinzuzufügen.
.custom-header-icon-link svg {
background-color: pink;
stroke: white;
}
Auf diese Weise, wenn Sie die Hintergrundfarbe nicht sehen, könnte das Problem darin bestehen, dass der Selektor nicht das richtige Element anspricht. In diesem Fall ist das Inspektionswerkzeug des Browsers sehr nützlich, da Sie die Hierarchie der Elemente betrachten und eine bessere Vorstellung davon bekommen können, wie der Selektor geschrieben werden sollte.
Mit Chrome können Sie Strg + Umschalt + C drücken und auf das Symbol klicken, um es in der Liste zu diesem Element springen zu lassen. Wenn Sie einen Screenshot des Elements-Tabs posten möchten, könnten wir uns ansehen, wie die Dinge organisiert sind. Zum Beispiel sieht es bei mir so aus, wenn ich die Komponente in der Vorschau ausprobiere:
Ich werde das versuchen, wenn ich wieder zu Hause bin. Ich versuche jetzt schon seit 8 Stunden, das zum Laufen zu bringen 
background-color war eines der Dinge, die ich früher versucht habe, und ich habe nonstop mit Inspect Element herumgespielt, aber es hat immer noch nicht funktioniert. Ich werde das “important”-Ding später ausprobieren, wenn ich in ein paar Stunden zu Hause bin, und ein Update hinterlassen! Und ja, es sind zu 100 % .SVG-Links.
Das klingt frustrierend!
Eine weitere hilfreiche Technik zur Fehlerbehebung ist, Stile direkt im Inspektor auf das Element anzuwenden, um zu sehen, ob das funktioniert (verwenden Sie den Teil element.style im Tab „Styles“). Hinweis: Dies sind temporäre Änderungen, die nur das aktuelle Fenster betreffen und beim Aktualisieren gelöscht werden.
Hier sind meine Icons und hier ist das Inspect Element dafür:
Ich habe alle CSS-Codes ausprobiert, die Sie aufgelistet haben, sowohl mit „stroke“ als auch mit „fill“. Das „!important“ hat auch nicht funktioniert. Ich habe keine Ahnung, was das verursacht.
Ich bin jedoch vielleicht auf etwas gestoßen. Mir ist aufgefallen, dass, obwohl ich SVG-„Bilder“ verwende, das Inspect Element sie immer noch in einem <img>-Tag anzeigt, im Gegensatz zu dem class=" , das Ihres anzeigt. Ist das ein Fehler bei Custom Header Icons?
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.
.custom-header-icon-link img {
filter: invert(100%);
}
Beachten Sie, dass der Selektor jetzt img anstelle von svg sein muss
2 „Gefällt mir“