+34 650908608 contacto@creandowp.es
Seleccionar página
Optimizar con WP rocket servidor privado

A veces tenemos iconos pero no nos cuadra con los colores del diseño de la web, lo que os voy a mostrar es como en wordpress cambiar el color de los iconos con css sin photoshop.

  1. Cambiar las propiedades de la imagen con css
  2. Cambiar las propiedades de la imagen con opciones avanzadas de DIVI

Cambiar las propiedades de la imagen con css

Estaba trabajando con un cliente y necesitaba unas imagenes de iconos, el problema es que los iconos no tenian los colores que yo necesitaba para el diseño inicial del proyecto. 

iconos antes y despues de cambiar el color

Buscando posibles soluciones para wordpress cambiar color de los iconos con css sin photoshop vi un hilo de stackoverflow donde comentaban como se podia cambiar con Css las propiedades de la imagen usando el brillo, contraste y hue. Básicamente tenemos que poner este codigo en la imagen: 

filter: brightness(0) saturate(100%) invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);

Cambiar las propiedades de la imagen con opciones avanzadas de divi

En el caso de estar usando un constructor de DIVI como es mi situación, debemos irnos al modulo que contiene la imagen, podemos en wordpress cambiar el color de los iconos con css sin photoshop de dos maneras:

1.- Vamos a propiedades avanzadas como puedes ver en la siguiente imagen:

Divi configuracion avanzada de modulo

En la sección de CSS personalizado bajamos hasta donde indica “imagen” y insertamos el codigo de CSS que hemos indicado en el paso anterior , os dejo una captura de pantalla:

 

Divi configuracion avanzada de modulo aplicar css a imagen

2.- Vamos a la pestaña de diseño y luego a la sección “imagen”, veremos todas las propiedades de la imagen, tenemos que usar los mismos valores que usamos en el css pero en este caso hay que introducirlos de manera manual como podéis ver en la siguiente captura de pantalla

Divi configuracion avanzada de modulo cambiar propiedades de imagen

También se puede hacer lo mismo para cambiar el color a blanco, rojo, verde o azul siguiendo el mismo sistema. Os dejo el codigo necesario para cada uno de estos casos:

 

/* cambiar el color de la imagen a blanco */

filter: invert(100%) sepia(16%) saturate(7463%) hue-rotate(222deg) brightness(119%) contrast(115%);

 

/* cambiar el color de la imagen a rojo */`

filter: invert(16%) sepia(99%) saturate(7404%) hue-rotate(4deg) brightness(95%) contrast(118%);

 

/* cambiar el color de la imagen a verde */

filter: invert(26%) sepia(89%) saturate(1583%) hue-rotate(95deg) brightness(96%) contrast(106%);

 

/*cambiar el color de la imagen a azul*/

filter: invert(10%) sepia(90%) saturate(5268%) hue-rotate(245deg) brightness(109%) contrast(155%);