FontAwesome CKEditor para TYPO3

Por qué FontAwesome en el CKEditor beneficia a los editores pero cuesta 300 KB de rendimiento

Los editores quieren colocar iconos junto a titulares, en tablas y entre párrafos de texto. Sin ayuda técnica, copian imágenes de iconos como inline images en el RTE - con layout roto y tamaño inconsistente como resultado. rte_ckeditor_fontawesome resuelve el problema de forma limpia: los editores seleccionan iconos del catálogo FontAwesome directamente en el CKEditor mediante un botón de diálogo y los insertan como tag <i> en el texto enriquecido. Los iconos escalan automáticamente con el tamaño del texto, son personalizables en color y funcionan en cualquier elemento de contenido.

El precio: toda la librería FontAwesome (aprox. 300 KB como webfont o 180 KB como sprite SVG) se carga en cada página, aunque solo se usen 3 iconos. Para webs críticas en rendimiento, eso es un overhead notable.

Escenarios de uso habituales

Listas con iconos en descripciones de servicios. Un proveedor de servicios describe sus prestaciones con listas de iconos: marca de verificación ante cada ventaja, rueda dentada ante cada paso del proceso, icono de teléfono ante el número de contacto. El editor inserta los iconos directamente en el CKEditor sin necesitar a un desarrollador.

Tablas comparativas de funcionalidades. Los product managers gestionan tablas comparativas en el CKEditor. En lugar de “Sí” y “No” usan iconos de marca verde y cruz roja. rte_ckeditor_fontawesome proporciona estos iconos del catálogo FontAwesome. La tabla se vuelve visualmente comprensible al instante.

Plantillas de newsletter con iconos. Empresas que gestionan contenidos de newsletter en el backend TYPO3 y los envían mediante una extensión de newsletter usan iconos FontAwesome para enriquecimiento visual.

Arquitectura técnica

rte_ckeditor_fontawesome amplía el CKEditor en el backend TYPO3 con un plugin adicional. El plugin registra un botón en la barra de herramientas del CKEditor que abre un diálogo de selección con función de búsqueda y filtro por categoría.

La integración funciona en tres niveles: Plugin CKEditor (plugin JavaScript para CKEditor 4 en TYPO3 v10/v11 o CKEditor 5 en TYPO3 v12+), salida HTML (al insertar, se escribe un tag <i> con las clases CSS correspondientes en el richtext) y renderizado frontend (para que los iconos sean visibles en el frontend, la librería CSS de FontAwesome debe cargarse en la web - la extensión no incluye los assets frontend, la integración es responsabilidad del desarrollador).

Nota importante sobre la versión de CKEditor: TYPO3 v12 cambia de CKEditor 4 a CKEditor 5. La arquitectura de plugins ha cambiado fundamentalmente. Los plugins de rte_ckeditor_fontawesome para CKEditor 4 no funcionan en CKEditor 5.

Problemas frecuentes y soluciones

Los iconos no se muestran en el frontend. La causa más frecuente: el CSS de FontAwesome no está incluido en la plantilla frontend. La extensión solo se ocupa del backend (selección de iconos en el CKEditor). La presentación en frontend requiere que fontawesome.min.css y los archivos de fuentes asociados se carguen en la plantilla. Solución: añadir FontAwesome como CSS include vía TypoScript.

Los iconos aparecen como cuadrados vacíos. Los archivos de fuente (woff2, woff) no se cargan correctamente. Frecuentemente la ruta en el archivo CSS está mal configurada, o el servidor web bloquea archivos de fuente (cabeceras CORS ausentes con integración CDN). Solución: alojar FontAwesome localmente en lugar de vía CDN. Eso evita problemas CORS y es más conforme al RGPD.

Impacto en rendimiento por FontAwesome. Una instalación completa de FontAwesome carga más de 300 KB (todas las categorías de iconos: Solid, Regular, Brands). Si la web solo usa 10 iconos, 290 KB están desperdiciados. Solución: usar FontAwesome Subsetting - compilar solo los iconos utilizados en un archivo de fuente personalizado. Alternativa: migrar a un sistema de iconos SVG que incruste solo los iconos realmente usados como SVG inline.

Migración y compatibilidad de versiones

rte_ckeditor_fontawesome está disponible como extensión estable para TYPO3 v10 y v11 (CKEditor 4). Para TYPO3 v12 (CKEditor 5) existen adaptaciones con la arquitectura de plugins completamente nueva.

Para TYPO3 v13 en adelante, Gosign recomienda una reevaluación fundamental del enfoque. En lugar de cargar FontAwesome como webfont, las webs modernas apuestan por sistemas de iconos SVG: cada icono se incrusta como SVG inline, solo se cargan los iconos utilizados, el tamaño de archivo baja de 300 KB a menos de 10 KB. El esfuerzo de migración de FontAwesome a iconos SVG es típicamente de 2 a 3 días: crear el sprite SVG, adaptar el widget CKEditor, reemplazar los tags <i> existentes en el contenido por referencias <svg>. Una web corporativa típica usa de 15 a 30 iconos de los más de 2.000 de FontAwesome Free. Un sprite SVG a medida con 30 iconos pesa de 8 a 15 KB - una quincuagésima parte de la librería FontAwesome completa.