Cómo cambiar cualquier icono de Elementor con CSS

Si dudas Elementor es el builder más utilizado en WordPress hoy en día, esta herramienta puede permitirnos crear sitios webs profesionales de forma fácil y rápida, sin embargo en ocaciones hay veces que no nos deja editar ciertos elementos cómo por ejemplo el icono de cerrar popup.

Cómo cambiar el icono «cerrar» (close) del popup en elementor

A continuación veremos cómo modificar el icono «close»

  1. Crear y Descargar un paquete .zip de iconos en cualquiera de los siguientes sitios: Fontello, IcoMoon y Fontastic
fontello
  1. lnstalar el plugin «Custom Icons for Elementor» para luego cargar tu paquete de iconos .zip
  1. Colocar la siguiente regla CSS en tu WordPress «Apariencia/Personalizar»
.eicon-close {
    font-family: "NOMBRE DE FUENTE" !important;
}
.eicon-close::before {
    content: "\0801";
}

Reemplazar "NOMBRE DE FUENTE" por el nombre de fuente que has asignado a tus iconos en Fontello, Icomoon o Fontastic.

Recuerda tambien reemplazar "\0801" por el código de tu icono.

Si quieres cambiar otro icono, debes buscar el selector del mismo inspeccionando desde el navegador y cambiar .eicon-close por el que corresponda, ejemplo «far fa-envelope» para el icono de «Sobre».

sobre
.far fa-envelope {
    font-family: "NOMBRE DE FUENTE" !important;
}
.far fa-envelope:before {
    content: "\0801";
}

¡Listo!