Hola. Estoy usando Iconos personalizados de encabezado.
Me gustaría que estos fueran blancos.
Parece que el componente utiliza un elemento con una clase de custom-header-icon-link para contener cada icono. Si estás utilizando iconos svg, deberías poder dirigirte a ellos de esta manera:
.custom-header-icon-link svg {
stroke: white;
}
A veces, los svg parecen estar hechos de líneas, pero en realidad están hechos de formas rellenas, por lo que es posible que necesites cambiar stroke: white por fill: white.
1 me gusta
Hola, probar ambas opciones todavía hace que se vean así:
Con el CSS que proporcionaste, no hubo ningún cambio.
Hmm, ¡no estoy seguro de lo que está pasando ahí! Podrías verificar dos veces para asegurarte de que los iconos sean SVG y no archivos de imagen. También podrías probar stroke: white !important; en caso de que algún otro estilo lo esté anulando.
Una ‘prueba de cordura’ que me gusta hacer con CSS cuando parece que no está haciendo nada es añadir un background-color al selector.
.custom-header-icon-link svg {
background-color: pink;
stroke: white;
}
De esta manera, si no ves el color de fondo, el problema podría ser que el selector no está apuntando al elemento correcto. En este caso, la herramienta de inspección del navegador es muy útil porque puedes ver la jerarquía de los elementos y tener una mejor idea de cómo debería escribirse el selector.
Con Chrome, puedes presionar Ctrl+Shift+C y hacer clic en el icono para que salte a ese elemento en la lista. Si quieres publicar una captura de pantalla de la pestaña de elementos, podríamos echar un vistazo a cómo están organizadas las cosas. Por ejemplo, así es como se ve para mí cuando pruebo el componente en la vista previa:
Lo intentaré cuando regrese a casa. Llevo como 8 horas intentando que esto funcione 
el color de fondo fue una de las cosas que intenté antes y he jugado con el Elemento de Inspección sin parar pero todavía no funcionó. ¡Intentaré lo de la “importancia” más tarde cuando esté en casa en unas horas y dejaré una actualización! Y sí, son 100% enlaces .SVG.
¡Ah, hombre, suena frustrante!
Otra técnica que puede ser útil para la resolución de problemas es agregar estilos directamente al elemento en el inspector para ver si funciona (usando la parte element.style de la pestaña de estilos). Nota: estos son cambios temporales que solo afectan a la ventana actual y se eliminan al actualizar.
Aquí están mis iconos y aquí está el Elemento de Inspección para ellos:
He probado todos los códigos CSS que enumeraste, tanto probando “stroke” como “fill”. La cosa de “!important” tampoco funcionó. No tengo idea de qué está causando esto.
Sin embargo, creo que me he topado con algo. Noté que, aunque estoy usando “imágenes” .SVG, el Elemento de Inspección todavía las muestra en una etiqueta <img> frente a la <svg class=" que muestra la tuya. ¿Es esto un error con Iconos de encabezado personalizados?
Ajá, sí, parece que esa es la razón por la que los cambios no hacían nada: en realidad no hay una etiqueta <svg>. No creo que sea un error que el componente la ponga en una etiqueta <img>. Esa es solo una de las formas de mostrar un SVG, pero hace que sea más difícil estilizarlo. Si tienes acceso a los archivos SVG en sí, puedes cambiar el trazo o el color de relleno allí (sería un atributo como stroke="black", y podría haber más de uno).
Si no puedes editar el SVG, podrías intentar usar filtros CSS. Estos te permiten agregar ciertos efectos visuales a un elemento. Como ahora parecen negros, podríamos intentar invertirlos para obtener blanco.
.custom-header-icon-link img {
filter: invert(100%);
}
Ten en cuenta que el selector ahora necesita ser img en lugar de svg
2 Me gusta