Los iconos de Elementor desaparecen por razones predecibles. La falta de archivos CSS, los datos de plugins obsoletos, los conflictos de caché, las discrepancias en HTTPS y las restricciones del servidor son las causas más comunes en los sitios de WordPress en EE. UU. y en todo el mundo.
Esta guía abarca todas las causas y la solución exacta para cada una, para que puedas restaurar tus iconos sin tener que adivinar.
Los iconos de Elementor pueden no mostrarse debido a la falta de bibliotecas de iconos, archivos de plugins obsoletos, conflictos de caché, permisos de archivo incorrectos o problemas con la carga de fuentes. Para solucionar este problema, normalmente es necesario regenerar los recursos de Elementor, borrar la caché, actualizar los plugins y verificar que los archivos de fuentes de iconos se carguen correctamente. Consultar las herramientas para desarrolladores del navegador también puede ayudar a identificar recursos bloqueados o errores de carga que impiden que aparezcan los iconos.
¿Qué es el Icon Box en Elementor?
El Icon Box es un de Elementor que combina un icono, un título y una descripción en un solo elemento. Se utiliza para destacar características, servicios o información clave en cualquier página. Es compatible con Font Awesome, Material Design y bibliotecas de iconos personalizadas, y puedes ajustar el tamaño, el color y la posición directamente en el editor de Elementor sin necesidad de modificar el código.
Esto es lo que puedes hacer con el cuadro de iconos:
- Elige tu ícono: ya sea que te gusten los de Font Awesome, Material Design o tengas un ícono único, la elección es tuya.
- Personalízalo: ¿ Quieres el ícono un poco más grande? ¿De otro color? No hay problema. Puedes ajustar su tamaño, cambiar su tono y experimentar con su apariencia. Además, puedes escribir tu título y descripción.
- Arrastra, suelta y listo: No necesitas ser un experto en tecnología para usarlo. Simplemente arrastra el widget Icon Box a la ubicación deseada en tu página o publicación, ¡y ya está!
¿Los íconos de Elementor aún no se muestran? ¡No te preocupes!
Nuestro equipo de soporte técnico especializado en WordPress puede ayudarte a solucionar este problema. Ponte en contacto con nosotros hoy mismo.
¿Tienes problemas con los íconos en Elementor? Aquí tienes una lista de verificación para ayudarte
Si los iconos no son visibles, siga esta breve lista de comprobación para identificar el posible error y restaurarlos antes de intentar soluciones más avanzadas.
- Actualizar Elementor: Al igual que con las apps del teléfono, el software a veces necesita una actualización. Asegúrate de que Elementor esté actualizado.
- Comprueba la biblioteca de iconos: ve a Elementor, luego a Ajustes, después a Avanzado y confirma que la opción Font Awesome esté activada. Si está desactivada, los iconos no se mostrarán independientemente de la configuración.
- Prueba de conflictos de plugins o temas: Desactiva temporalmente tus otros plugins y cambia a un tema predeterminado de WordPress, como Twenty Twenty-Four. Si vuelven a aparecer los iconos, reactiva los plugins uno por uno para identificar el conflicto.
- Borrar caché: Borra la caché de tu navegador y la de tu plugin de caché. Además, regenera los archivos de Elementor en Elementor > Herramientas > Regenerar archivos y datos para asegurarte de que se carguen los recursos actualizados.
- Prueba en otro navegador: Algunos navegadores gestionan la carga de fuentes de forma diferente. Prueba tu página en Chrome, Firefox y Safari para confirmar si el problema es específico de algún navegador o afecta a todo el sitio web.
- Comprueba la configuración de tu CDN: Si utilizas una CDN, es posible que esté bloqueando los archivos de fuente necesarios para los iconos de Elementor. Desactiva temporalmente la CDN y comprueba si los iconos se cargan. Si se cargan, ponte en contacto con tu proveedor de CDN para que añada los tipos de archivo de fuente necesarios a la lista blanca.
Consejos para solucionar el problema de los iconos de Elementor que no se muestran
Puede resultar desconcertante cuando los iconos personalizados de Elementor deciden jugar al escondite en tu sitio web.
La mayoría de los problemas con los iconos de Elementor se deben a dos causas: cambios recientes en el plugin que afectan a la forma en que se cargan los iconos, o la ausencia total de iconos en la biblioteca. Las soluciones que se describen a continuación abordan ambas situaciones.
- Modificaciones al plugin Elementor: Es posible que los cambios, actualizaciones o personalizaciones recientes requieran que los iconos se muestren correctamente. Esto podría deberse a conflictos o configuraciones incompatibles.
- Iconos que faltan en la biblioteca: En ocasiones, es posible que falten iconos de la biblioteca o que no se carguen, lo que provoca que desaparezcan de sus diseños.
Ahora que hemos identificado a los posibles culpables, veamos las soluciones para que sus íconos vuelvan a ser el centro de atención.
Problema 1: Cambios en el plugin Elementor
Es posible que hayas actualizado recientemente o instalado recientemente el plugin Elementor, y ahora algunos iconos de Font Awesome no se muestran.
Esto es lo que puedes hacer:
- Navega hasta tu panel de WordPress.
- Seleccione “Elementor” en la barra lateral y luego seleccione “Configuración”
- Haga clic en la pestaña “Avanzado”.
- Busca la opción "Cargar compatibilidad con Font Awesome 4". Actívala o asegúrate de que esté activada.
Problema 2: Archivos CSS y de datos de Elementor obsoletos
En ocasiones, los iconos de Elementor no se cargan correctamente debido a que los archivos CSS generados se desactualizan o se corrompen tras una actualización del plugin o un cambio de configuración. En estos casos, es posible que los estilos de fuente de los iconos no se carguen correctamente, lo que provoca que aparezcan en blanco o invisibles en la página.
Afortunadamente, Elementor ofrece una solución rápida para este problema. Sigue estos pasos para regenerar los archivos:
- Ve a tu panel de WordPress y abre Elementor.
- Haz clic en Herramientas en el menú.
- En la General , seleccione Regenerar archivos y datos.
- Haz clic en el botón y permite que Elementor actualice los datos.
Este proceso reconstruye los archivos CSS almacenados en la base de datos y actualiza los recursos utilizados para mostrar los iconos. Una vez completados estos pasos, recargue la página y compruebe si los iconos son visibles.
En muchos casos, esta sencilla solución resuelve el error sin necesidad de realizar más comprobaciones.
Problema 3: Contenido mixto o problemas de configuración HTTPS
Otra razón común por la que no aparecen los iconos es un problema de contenido mixto. Esto ocurre cuando tu sitio web se carga mediante HTTPS, pero algunos archivos de iconos o recursos de fuentes se siguen solicitando mediante HTTP.
Los navegadores modernos bloquean estas solicitudes por motivos de seguridad, lo que impide que se carguen los iconos.
Para empezar, comprueba la dirección de WordPress y la dirección del sitio en la configuración general para asegurarte de que ambas utilizan la URL HTTPS correcta. Si hay alguna discrepancia, actualiza la configuración y guarda los cambios.
También puedes inspeccionar la página con las herramientas para desarrolladores de tu navegador para encontrar recursos bloqueados. Si se bloquean los archivos de iconos, actualiza las URL en la configuración de tu base de datos o plugin.
Una vez que todos los recursos se hayan cargado a través de HTTPS, los iconos deberían volver a ser visibles.
Problema 4: Problemas de permisos de archivo o de configuración del servidor
En algunos casos, el problema puede deberse a la configuración de tu servidor o alojamiento web. Los iconos de Elementor utilizan archivos de fuente como WOFF y TTF. Si el servidor bloquea estos tipos de archivo o los permisos son incorrectos, es posible que los iconos no se carguen correctamente.
Para solucionar esto, verifica los permisos de archivo dentro de tu instalación de WordPress, especialmente en las carpetas que almacenan recursos de Elementor. Los permisos deben permitir que el servidor acceda a estos archivos.
También puedes contactar con tu proveedor de alojamiento para confirmar que los archivos de fuentes no estén restringidos por normas de seguridad. Algunos servidores bloquean ciertos recursos por defecto, lo que puede provocar que los iconos aparezcan en blanco.
Una vez que el servidor permita el acceso a los archivos necesarios, los iconos de Elementor deberían cargarse con normalidad en el menú y las páginas de su sitio web.
Problema 5: Los iconos desaparecen de la biblioteca
En ocasiones, los iconos de la biblioteca de iconos de Elementor desaparecen, especialmente en las plantillas que utilizan iconos "Nucleo Mini".
Aquí te explicamos cómo puedes comprobarlo y solucionarlo:
- Visita la página donde deberían aparecer tus íconos.
- Haga clic en el botón “Editar con Elementor” para iniciar el editor de Elementor.
- Desde allí, abre la biblioteca multimedia. Esto te permitirá ver si el ícono que buscas está en ella.
- Si falta el ícono deseado, debes actualizar tu complemento Kava Extra a la última versión para resolver el problema.
Alternativa al complemento Font Awesome
Si las soluciones anteriores no restauran tus iconos, puedes probar otro método: instalar directamente el plugin Font Awesome
- Dentro de tu panel de administración de WordPress, navega a Plugins → Agregar nuevo → Subir plugin.
- Aquí tendrás la opción de cargar el complemento Font Awesome que hayas descargado a tu computadora.
- Haga clic en el botón “Instalar ahora”.
- Una vez instalado, no olvides hacer clic en el botón “Activar complemento”.
- El complemento Font Awesome ahora debería estar activado en su sitio y sus íconos deberían volver a funcionar.
Siempre haz una copia de seguridad de tu sitio antes de realizar cambios o actualizaciones importantes. Si ocurre algo inesperado, tendrás un respaldo.
Conclusión: Soluciona los problemas de los iconos de Elementor y asegúrate de que sigan funcionando
La falta de iconos en Elementor casi siempre se debe a una de estas cinco causas: configuración obsoleta del plugin, archivos CSS anticuados, conflictos HTTPS, restricciones del servidor o iconos de biblioteca faltantes.
Sigue los pasos en orden y, en la mayoría de los casos, resolverás el problema sin necesidad de contactar con el soporte técnico. Si todo lo demás falla, instalar directamente el plugin Font Awesome ofrece una solución alternativa fiable que funciona independientemente de la carga de iconos integrada de Elementor.
Preguntas frecuentes sobre cómo solucionar el problema de que los íconos de Elementor no se muestran
¿Por qué no se ven los iconos de Elementor en mi sitio web de WordPress?
Los iconos de Elementor pueden no aparecer debido a problemas de caché, una dirección de WordPress o del sitio web incorrecta, o problemas de compatibilidad con plugins o complementos. En ocasiones, la fuente de iconos no se carga debido a una URL incorrecta, recursos HTTPS bloqueados o archivos de base de datos obsoletos. Si esto ocurre por primera vez, borre la caché y siga los pasos descritos en este tutorial para restaurar los iconos y que vuelvan a ser visibles.
¿Cómo puedo solucionar el problema de que los iconos de Elementor no se muestren después de iniciar sesión?
Tras iniciar sesión en tu panel de WordPress, abre la configuración de Elementor y regenera los archivos CSS. Esta acción actualiza los datos almacenados y corrige muchos errores de carga de iconos. También puedes borrar la caché de tu sitio desde tu panel de alojamiento o plugin de caché. En muchos casos, estas dos soluciones resuelven el problema rápidamente.
¿Puede un problema de caché provocar que los iconos de Elementor aparezcan en blanco?
Sí. Un problema de caché suele impedir que se carguen los nuevos archivos de iconos. Cuando los archivos en caché están desactualizados, los iconos pueden aparecer en blanco o no aparecer. Borra la caché de tu navegador, plugin y CDN. Una vez que se actualicen los datos antiguos, los iconos deberían volver a ser visibles.
¿Los conflictos con plugins o complementos afectan a los iconos de Elementor?
Sí. Algunos complementos de Elementor o plugins de terceros pueden causar problemas de compatibilidad que impiden la carga de los iconos. Desactive los plugins uno por uno desde el menú para encontrar el conflicto. Una vez identificado, actualice o reemplace el plugin problemático.
¿Qué debo revisar si el error persiste?
Si el error persiste después de seguir los pasos anteriores, compruebe la dirección de WordPress y la configuración de la dirección del sitio, confirme la configuración HTTPS correcta y revise los datos de la base de datos.
