[Resuelto] Darle color a iconos FA FA  

Hola

Según veo en el código es posible que estes usando algún constructor para hacer esta página, si estas usando algún constructor revisa en las opciones del bloque si tienes la opción de cambiar el color.

Envíanos algunas capturas de pantalla para ver cómo has realizado esta página.

Hacerlo por código sería algo como el siguiente código, cambiando blue y red, el red es cuando el mouse esta sobre la caja.

.cms-fancyboxes-wraper.cms-fancyboxes-layout3 .cms-fancybox-icon{
  background:blue;
}

.cms-fancyboxes-wraper.cms-fancyboxes-layout3:hover .cms-fancybox-icon{
  background:red;
}

Saludos.

Gracias, la verdad que no se como lo han hecho ya que yo compré un template y lo modifiqué...
Solo veo que para esta pagina en particular, se usa un complemento llamado CMS Single Fancy Box (y no me da ninguna opcion de elegir iconos en color al alegir el icono).

Voy a intentar con el codigo que me diste, pero me da la sensacion que cambiaria el color de todos los iconos, correcto?

Hola

Si, si sólo lo quieres para esa página puedes agregar .page-id-6250 delante, es decir tu código quedaría:

.page-id-6250 .cms-fancyboxes-wraper.cms-fancyboxes-layout3 .cms-fancybox-icon{
  background:blue;
}
 
.page-id-6250 .cms-fancyboxes-wraper.cms-fancyboxes-layout3:hover .cms-fancybox-icon{
  background:red;
}

Saludos.

Hay forma de cambiar el color de los iconos individualmente? Esa era mi intencion original

Hola Walter,

Ok si consideras que es un problema el CMS Fancybox debes encontrar algún plugin o alguna opción en tu tema o en el constructor de paginas web si estás usando uno para que te permita utilizar el que adquiriste o puedes utilizar este otro -> https://wordpress.org/plugins/font-awesome/ y desde el editor de bloques agregar el Shortcode como por ejemplo: [icon name=”rocket”] y a la derecha se te mostrará una paleta de colores de texto, eliges el color y listo.

Otra manera es como lo indica Jhon, mediante código CSS. Puedes indicarnos de qué colores quieres cada uno de los íconos y te proporcionamos el código necesario.

Saludos.

Lo probé y funciona perfecto, pero cambia el color de todos los iconos de la pagina al mismo color.

Se puede elegir un color distinto para cada icono?

En esa pagina hay 16 iconos, puedo darle un color diferente a cada uno?

Hola Walter.

Si que podrias asignando el color a cada Icono.

Por ejemplo queremos cambiar el fondo de " Asesoramiento laboral "
.- Con el inspector web del navegador selecciona el icono que quieres cambiar el color:

Vemos que nos muestra el código siguiente:

.cms-fancyboxes-wraper.cms-fancyboxes-layout3 .cms-fancybox-icon

y el nombre del icono que es

i.fa.fa-comments-o

Con esos datos ya podemos construir nuestro propio código CSS, el de este ejemplo seria:

.cms-fancyboxes-wraper.cms-fancyboxes-layout3 .cms-fancybox-icon i.fa.fa-comments-o {
    color:red;
}

En este enlace tienes documentacion de como utilizar el inspector Web:
-> https://developers.google.com/web/tools/chrome-devtools/inspect-styles/?hl=es

Los códigos los puedes añadir al final del archivo style.css que tienes en la carpeta hijo de la plantilla.

Puedes utilizar el codigo que te pase para todos los iconos, solo tienes que modificar el nombre del icono y el color.

En este enlace tienes una tabla de colores:
-> https://htmlcolorcodes.com/es/

Un saludo