Cambiar Color a icono de menú

[jordan_j]

Hola, primero gracias por su atención.

Tengo un problemilla, se algo de css pero no mucho.
Tengo un label donde le asigno por css un background-image el cual son 3 rayas que representan a un icono de menú, por lo que alcance a ver es un svg, pero no puedo cambiarle el color.
Si no me hago entender aquí dejo el código css:

Código:

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 90%;
  z-index: 2;
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
}

[MrGilbertMan]

para cambiar el color debes utilizar un editor gráfico y colorearlo a tu gusto!
por ejemplo el paint.

Solo puedes cambiar de color desde css si fuese una fuente.

[michellqm]

c: saludos, para cambiar el color deun svg debes usar la propiedad "fill" ej

Código CSS:

label[for="nav-trigger"] {
  /* critical positioning styles */
  position: fixed;
  left: 15px; top: 90%;
  z-index: 2;
  /* non-critical apperance styles */
  height: 30px;
  width: 30px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1' x='0px' y='0px' width='30px' height='30px' fill="#000" viewBox='0 0 30 30' enable-background='new 0 0 30 30' xml:space='preserve'><rect width='30' height='6'/><rect y='24' width='30' height='6'/><rect y='12' width='30' height='6'/></svg>");
}
 

Las propiedades de los svg son basicamente Fill (para rellenar el color de fondo) y stroke (para el borde alrededor)

Este color también puede cambiarse desde css pues es un elemento web

le aplicas una clase a tu svg y puedes usar algo como

Código CSS:

.elemento-svg {
    fill: red;
   stroke: blue
}
 

y listo c: los svg son geniales

Suerte!