Si trabajamos con Elementor habitualmente para desarrollar páginas web en WordPress, ya sabremos que por defecto utiliza Font Awesome como biblioteca de iconos. Esto, en general, es una buena noticia ya que nos permite contar rápidamente con un abanico bastante amplio de iconos sin tener que recurrir a recursos externos ni soluciones personalizadas.
Además, Elementor gestiona de forma razonable la carga de estos iconos, ya que Font Awesome solo se incluye en aquellas páginas del frontend donde realmente se utiliza, algo que ayuda a no penalizar el rendimiento más de lo necesario.
No obstante, hay situaciones concretas en las que puede interesarnos desactivar Font Awesome por completo en toda la web, independientemente de que Elementor lo utilice internamente. Por este motivo he pensado que podría ser buena idea darle un vistazo rápido a cómo hacerlo, si bien antes de dar este salto es importante que veamos unas consideraciones antes.
Consideraciones previas
Cuándo tiene sentido desactivar Font Awesome
Desactivar Font Awesome no debería ser una decisión automática. Normalmente solo tiene sentido en proyectos muy controlados, por ejemplo cuando el sitio no utiliza iconos de esta librería en absoluto, cuando se trabaja exclusivamente con iconos SVG propios o cuando se busca reducir al máximo la carga de recursos externos en una web especialmente optimizada. A fin de cuentas estamos prescindiendo de una librería completa y eso tiene su efecto positivo.
En proyectos donde por requisitos debo usar Elementor como base, este tipo de ajustes los aplico solo cuando tengo claro que no habrá efectos colaterales. Como desarrollador web freelance especializado en WordPress, prefiero asumir un pequeño coste extra de carga antes que romper un detalle visual que luego cuesta detectar, sobre todo cuando el portal no lo he creado yo desde el principio.
Cuándo no conviene hacerlo
Del mismo modo, hay casos en los que desactivar Font Awesome puede ser más un problema que una ventaja. Si usas widgets de Elementor que dependen de iconos, si algún plugin hace uso interno de esta librería o si el diseño puede evolucionar en el futuro, lo más prudente es dejarla activa.
Eliminar Font Awesome sin revisar estos puntos puede provocar iconos que desaparecen, huecos extraños en la maquetación o pequeños fallos visuales que no siempre se detectan a simple vista. De modo que si no lo tienes claro, es mejor evitar trastear.
Cómo desactivar Font Awesome en Elementor mediante código
Elementor no ofrece ninguna opción desde su interfaz para desactivar Font Awesome de forma global, así que si queremos hacerlo tendremos que añadir un pequeño fragmento de código que lo posibilite.
Ya sé que soy repetitivo, pero es recomendable que hagas un backup de tu sitio antes de liarte la manta a la cabeza. Si no estás muy acostumbrado a modificar código, esto te dará un plus de tranquilidad.
Lo primero que debes hacer es localiza el archivo functions.php del tema activo. Si trabajas con un tema hijo (algo muy recomendable), será ahí donde debas hacer la modificación. Se podría crear también un plugin para esto, pero como no quiero enredar demasiado el tema, nos centraremos en lo anterior.
El código consiste en engancharse a un hook de Elementor y dar de baja los estilos asociados a Font Awesome usando wp_deregister_style.
add_action('elementor/frontend/after_register_styles', function() {
foreach (['solid', 'regular', 'brands'] as $estilo) {
wp_deregister_style('elementor-icons-fa-' . $estilo);
}
}, 20);
De forma resumida, el código espera a que Elementor registre sus estilos en el frontend y, justo después, elimina las tres variantes principales de Font Awesome antes de que se impriman en la página. Es una solución directa y efectiva, pero también bastante radical, por lo que conviene saber bien dónde se está aplicando.
Con este fragmento, aunque desde el backend sigas utilizando iconos de Font Awesome, en el frontend no se cargarán sus hojas de estilo, por lo que dejarán de mostrarse.
Consideraciones finales
Después de aplicar este cambio es recomendable revisar el sitio con calma. Conviene comprobar varias páginas, no solo la principal, y prestar atención a cabeceras, pies de página, formularios y widgets que puedan depender de iconos.
Si detectas espacios en blanco donde antes había un icono o elementos visuales incompletos, ya sabes cuál es el motivo.
En algunos proyectos puede ser más sensato optar por soluciones menos drásticas. Por ejemplo, cargar Font Awesome solo en determinadas páginas, sustituir iconos concretos por SVG inline o usar iconos personalizados directamente desde Elementor.
Estas opciones requieren algo más de trabajo, pero ofrecen mayor control y reducen el riesgo de romper el diseño en el futuro.
Como suele ocurrir con la optimización, el beneficio real depende mucho del caso concreto. Por experiencia puedo decir que para un desarrollador WordPress, a veces merece la pena y otras no tanto. Analiza bien la situación y actúa en consecuencia.
Referencias:
- Cómo acelerar un sitio lento con Elementor (inglés) – Elementor Academy
- Función wp_deregister_style (inglés) – WordPress Developer Resources
Deja una respuesta