En lugar de convertir cada icono en un widget Icono suelto envuelto en contenedores, el convertidor reconoce la forma del bloque y elige el widget que elegiría un usuario experimentado de Elementor.
Patrón 1: Caja de icono
Un contenedor que contiene exactamente un título, un párrafo y al menos un icono, sin otros elementos de contenido (ni imágenes, botones, listas, tablas o formularios), se convierte en un único widget Caja de icono (Icon Box).
Lo que se traslada: el propio icono, el texto del título y de la descripción, el nivel del título, la alineación del texto, el tamaño del icono, el espacio entre el icono y el título, la separación bajo el título, y la tipografía y los colores tanto del título como de la descripción. El marco propio de la tarjeta (fondo, borde, radio, sombra, padding) se escribe en los ajustes de Avanzado del widget, así que no se crea ningún contenedor envoltorio adicional.
Patrón 2: Lista de iconos
Un contenedor cuyos hijos son dos o más filas repetidas, cada una con exactamente un icono más texto (y sin títulos, imágenes ni botones), se convierte en un único widget Lista de iconos (Icon List) con un elemento editable por fila.
Un buen detalle: si todas las filas usan el mismo icono de origen (la típica lista con marcas de verificación), se elige un único icono para todas las filas en lugar de adivinar un icono distinto para cada fila a partir del texto. Las marcas de verificación no reconocidas recurren a fa-check. Se trasladan el espacio entre filas, el tamaño del icono, el color del icono, el color del texto y la tipografía del texto.
Patrón 3: un Icono simple
Cualquier otra cosa que sea solo un icono se convierte en un widget Icono, con el tamaño y el color del original.
Cómo llevar los iconos a la biblioteca de iconos de Elementor
Configura la opción Iconos en Coincidir con la biblioteca de iconos de Elementor. Después:
- Si tu marcado ya usa clases de Font Awesome (
<i class="fas fa-shield-alt">), se usa exactamente ese icono. - Si es un
<svg>en línea sin nombre, el convertidor busca la coincidencia por significado (usando la clase del icono, su aria-label, su title y el texto del título de la tarjeta) en una tabla de palabras clave (shield → shield, recycle/reusable → recycle, water/clean → tint, etc.). - Si no coincide nada, el control del icono se deja vacío a propósito para que elijas uno en el selector de iconos de Elementor en lugar de recibir una suposición errónea.
Por qué una tarjeta que esperabas como Caja de icono no lo fue
Esta es la pregunta que trae a la gente a esta página, y la respuesta casi siempre es la misma: la tarjeta contiene un enlace.
La prueba de la Caja de icono descarta un contenedor que contenga cualquiera de estos elementos: un enlace, un botón, una imagen, una lista, una tabla, un formulario, un input, un select, un textarea, un vídeo o un iframe. Una tarjeta de característica con un enlace «Más información» al final cae en el primero de ellos, y se convierte en un contenedor con widgets separados.
Es deliberado, no un descuido. El widget Caja de icono de Elementor contiene un icono, un título y una descripción, y nada más. Aplanar una tarjeta que además contiene un enlace supondría eliminar el enlace o colarlo en algún sitio donde no corresponde. Ninguna de las dos cosas es aceptable, así que la herramienta renuncia a aplanar y te da la versión fiel.
Si quieres el resultado ordenado de la Caja de icono, la solución está en el origen: haz que toda la tarjeta sea clicable envolviéndola desde fuera, o quita el enlace interior y añade un Botón de Elementor después. Si prefieres conservar el enlace, la versión con contenedor está perfectamente bien: solo tiene un nivel más de profundidad.
El mismo principio, más claro con la Caja de imagen
El patrón de Caja de imagen (Image Box), con una imagen, un título y como máximo un párrafo, incluye una protección que merece la pena describir, porque muestra la regla sobre la que se construye todo el convertidor.
Antes de aplanar, compara el texto total de la tarjeta con el texto del título más el del párrafo. Si sobra algo de texto, la tarjeta no se convierte en una Caja de imagen.
El caso que detecta es la tarjeta de paso numerada: un «1» grande, un título y una descripción. Parece exactamente una candidata a Caja de imagen, pero el widget Caja de imagen no tiene dónde poner el «1»: si la aplanas, el número desaparece en silencio. La comparación detecta el texto sobrante y la tarjeta sigue siendo un contenedor, donde se conservan todas las piezas.
Perder contenido en silencio es el peor fallo que puede tener una herramienta de conversión, porque solo lo descubres mucho después, delante de otra persona. Obtener un árbol algo más profundo es un precio bajo por no hacerlo nunca.
Por qué conviene evitar el SVG en línea
Un SVG en línea dibujado a mano no se puede colocar en el control de icono de Elementor. Peor aún, un SVG que dependía del CSS de la página para su tamaño y su trazo (por ejemplo width:22px; stroke:currentColor; fill:none) pierde ese CSS en cuanto se saca de la página: puede mostrarse con su tamaño predeterminado y con un relleno negro sólido. Es el clásico síntoma de «mis pequeñas marcas de verificación se convirtieron en enormes formas negras».
Dos formas de evitarlo: usa clases de Font Awesome en el código fuente, o deja que la detección de Lista de iconos / Caja de icono sustituya el SVG por un icono real de la biblioteca. Los SVG en línea sin coincidencia que se quedan como HTML al menos se escriben con su tamaño renderizado, para que no puedan dispararse.