Salut. J’utilise le composant Icônes d’en-tête personnalisées.
Je voudrais qu’elles soient blanches.
Il semble que le composant utilise un élément avec une classe custom-header-icon-link pour contenir chaque icône. Si vous utilisez des icônes svg, vous devriez pouvoir les cibler comme ceci :
.custom-header-icon-link svg {
stroke: white;
}
Parfois, les svg ressemblent à des lignes mais sont en réalité constitués de formes pleines, vous devrez donc peut-être remplacer stroke: white par fill: white.
1 « J'aime »
Salut, essayer les deux les fait toujours ressembler à ceci :
Avec le CSS que vous avez fourni, aucun changement n’a été apporté.
Hmm, je ne suis pas sûr de ce qui se passe ! Vous pourriez vérifier pour vous assurer que les icônes sont des svg et non des fichiers image. Vous pourriez aussi essayer stroke: white !important; au cas où un autre style l’écraserait.
Un « test de sanity » que j’aime faire avec CSS quand il ne semble rien faire est d’ajouter une couleur de fond au sélecteur.
.custom-header-icon-link svg {
background-color: pink;
stroke: white;
}
De cette façon, si vous ne voyez pas la couleur de fond, le problème pourrait être que le sélecteur ne cible pas le bon élément. Dans ce cas, l’outil d’inspection du navigateur est vraiment utile car vous pouvez examiner la hiérarchie des éléments et avoir une meilleure idée de la façon dont le sélecteur doit être écrit.
Avec Chrome, vous pouvez appuyer sur Ctrl+Maj+C et cliquer sur l’icône pour qu’elle saute à cet élément dans la liste. Si vous souhaitez poster une capture d’écran de l’onglet des éléments, nous pourrions examiner comment les choses sont organisées. Par exemple, voici à quoi cela ressemble pour moi lorsque j’essaie le composant en aperçu :
J’essaierai ça quand je serai rentré chez moi. J’essaie de faire fonctionner ça depuis environ 8 heures 
la couleur de fond était l’une des choses que j’ai essayées plus tôt et j’ai tripoté l’Inspecteur d’éléments sans arrêt mais ça n’a toujours pas marché. J’essaierai le truc « important » plus tard quand je serai chez moi dans quelques heures et je laisserai une mise à jour ! Et oui, ce sont à 100 % des liens .SVG.
Ah, ça a l’air frustrant !
Une autre technique qui peut être utile pour le dépannage est d’ajouter des styles directement à l’élément dans l’inspecteur pour voir si cela fonctionne (en utilisant la partie element.style de l’onglet styles). Note : ce sont des modifications temporaires qui n’affectent que la fenêtre actuelle et sont supprimées lorsque vous actualisez.
Voici mes icônes et voici l’élément Inspect pour elles :
J’ai essayé tous les codes CSS que vous avez listés, en essayant à la fois « stroke » et « fill ». Le « !important » n’a pas non plus fonctionné. Je n’ai aucune idée de ce qui cause cela.
J’ai peut-être découvert quelque chose, cependant. J’ai remarqué que même si j’utilise des « images » .SVG, l’élément Inspect les affiche toujours dans une balise <img> par rapport à la balise <svg class=" que les vôtres affichent. S’agit-il d’un bug avec Custom Header Icons ?
Aha, oui, on dirait que c’est pour ça que les changements n’avaient aucun effet — il n’y a pas de balise <svg> réelle. Je ne pense pas que ce soit un bug que le composant l’ait mise dans une balise <img>. C’est juste une des façons d’afficher un svg, mais cela rend le style plus difficile. Si vous avez accès aux fichiers svg eux-mêmes, vous pouvez y changer la couleur du contour ou du remplissage (ce serait un attribut comme stroke="black", et il pourrait y en avoir plus d’un).
Si vous ne pouvez pas modifier le svg, vous pourriez essayer d’utiliser des filtres CSS. Ceux-ci vous permettent d’ajouter certains effets visuels à un élément. Comme ils apparaissent maintenant en noir, nous pourrions essayer de les inverser pour obtenir du blanc.
.custom-header-icon-link img {
filter: invert(100%);
}
Notez que le sélecteur doit maintenant être img au lieu de svg
2 « J'aime »