[Resuelto] Darle color a iconos FA FA  

 
Walter
 Walter
Estimable Member

Hola,

Me gustaría darle color a los iconos fa-fa que aparecen en este link

Contenido solo visible a usuarios registrados

Citar
Respondido : 27/11/2019 8:30 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/11/2019 9:05 pm

Cursos Gratuitos WordPress

Walter
 Walter
Estimable Member

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?

ResponderCitar
Respondido : 27/11/2019 9:45 pm
Jhon Marreros Guzman
 Jhon Marreros Guzman
Soporte CMS Webempresa Moderator

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.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio
¡Gracias!.

ResponderCitar
Respondido : 27/11/2019 9:49 pm

wpdoctor-revisa-la-salud-de-tu-wordpress

Walter
 Walter
Estimable Member

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

ResponderCitar
Respondido : 27/11/2019 10:04 pm
Bulmaro
 Bulmaro
Soporte CMS Webempresa Moderator

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.

Bulmaro Arellano N.

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar mi Testimonio

¡Gracias!.

ResponderCitar
Respondido : 27/11/2019 10:27 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

Walter
 Walter
Estimable Member

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?

ResponderCitar
Respondido : 28/11/2019 3:51 pm
Pepe
 Pepe
Soporte CMS Webempresa Admin

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

Si nuestra ayuda te sirve déjanos tu testimonio y mejora así el posicionamiento de tu web:
Enviar Testimonio
¿Has probado WpCenter?, es nuestro nuevo manager de WordPress desde el propio cPanel sin necesidad de acceder a tu administración, te permitirá configurar actualizaciones automáticas y mucho más.
Pruébalo accediendo a tu cPanel > Aplicaciones Webempresa > WpCenter
¡Gracias!.

ResponderCitar
Respondido : 28/11/2019 4:33 pm

optimiza-automaticamente-todas-las-imagenes-de-tu-wordpress

Por favor Iniciar Sesión o Registro