Cambiar cualquier icono de Elementor
Elementor es, sin duda, el constructor de páginas más popular en WordPress en la actualidad. Esta herramienta facilita la creación de sitios web profesionales de manera rápida y sencilla. A veces, nos encontramos con la dificultad de editar elementos específicos, como los iconos en Elementor. En este tutorial, te mostraremos cómo cambiar cualquier icono utilizando CSS como ejemplo.
Instrucciones paso a paso:
Paso 1: Descarga un Paquete de Iconos
Para comenzar, necesitarás crear un paquete de iconos en formato .zip. Puedes generar un paquete de forma gratuita en sitios como Fontello, IcoMoon y Fontastic.
Paso 2: Instala el Plugin «Custom Icons for Elementor»
Asegúrate de tener el plugin «Custom Icons for Elementor» instalado en tu sitio. Luego, carga el paquete de iconos en formato .zip que descargaste en el Paso 1.
Paso 3: Agrega Reglas CSS
Dirígete a «Apariencia» en tu panel de WordPress y selecciona «Personalizar«. Luego, sigue estos pasos:
/* Reemplaza ".nombre-de-selector" con el selector del icono que deseas cambiar */
.nombre-de-selector {
font-family: "NOMBRE DE TU FUENTE" !important;
}
.nombre-de-selector::before {
content: "\0801"; /* Reemplaza "\0801" con el código de tu icono personalizado */
}Asegúrate de reemplazar «.nombre-de-selector» con el selector del icono que deseas cambiar y «NOMBRE DE TU FUENTE» con el nombre de la fuente que asignaste a tus iconos en Fontello, IcoMoon o Fontastic.
Conclusión:
¡Y eso es todo! Con estos sencillos pasos, podrás personalizar cualquier icono en Elementor según tus preferencias. Si deseas modificar otros iconos, simplemente repite el proceso con el selector adecuado. En 2Pixeles, estamos aquí para ayudarte a llevar a cabo tus ideas y proyectos. ¡No dudes en contactarnos para diseñar y construir tu próxima gran idea!
