WEB APPS
Iconos Tipográficos para utilizar en tu web con CSS
Iconos tipográficos para utilizar en tu web con CSS
Los iconos tipográficos (icon fonts) son una forma eficaz y ligera de añadir iconografía a una web sin usar imágenes. Funcionan como una fuente: cada icono es un glifo vectorial que puedes escalar, colorear y estilizar mediante CSS sin perder calidad. Son compatibles con cualquier navegador moderno y resultan ideales para proyectos en WordPress.
En este artículo se explican los tres sets de iconos tipográficos más utilizados en WordPress y Divi: ElegantIcons, ETmodules y Dashicons. Verás qué son, cuándo usarlos y cómo integrarlos por CSS.
Qué es ElegantIcons
ElegantIcons es una fuente de iconos creada por Elegant Themes. Incluye más de 360 iconos gratuitos organizados por categorías y puede usarse en cualquier sitio web, independientemente del tema o constructor.
Se distribuye en formatos .ttf, .woff y .woff2 y se carga mediante @font-face. Es una opción adecuada cuando necesitas iconos tipográficos fuera de Divi o en un proyecto personalizado.
Ejemplo de carga
@font-face{ font-display:swap;
font-family: 'ElegantIcons';
src: url('/ruta/ElegantIcons.woff') format('woff');
}
Ejemplo de uso
.mi-icono::before {
font-family: 'ElegantIcons';
content: '\e08d';
font-size: 32px;
color: #333;
}
Qué es ETmodules
ETmodules es la fuente interna que utiliza Divi en sus módulos de iconos, botones, listas, menús y muchos elementos visuales. Está integrada directamente en el theme y el constructor, por lo que no requiere carga manual.
Divi utiliza ElegantIcons como base para ETmodules, pero no son exactamente la misma fuente:
- Comparten la mayoría de iconos.
- Algunos códigos unicode cambian.
- Divi añade iconos propios para su interfaz.
- No todos los iconos de ElegantIcons están disponibles en el selector de iconos del builder.
Ejemplo de uso por CSS
.mi-icono::before {
font-family: 'ETmodules';
content: '\e08d';
font-size: 32px;
color: #333;
}
¿Son lo mismo ElegantIcons y ETmodules?
Comparten el mismo estilo y muchos de los mismos iconos, pero no son idénticos. Se puede resumir así:
- ElegantIcons es la fuente original, independiente y descargable.
- ETmodules es la versión adaptada e integrada en Divi.
Si trabajas en un proyecto fuera de Divi, usa ElegantIcons. Si trabajas dentro de Divi, usa ETmodules.
Qué es Dashicons
Dashicons es la fuente de iconos oficial de WordPress. Se utiliza en el panel de administración para representar menús, ajustes, herramientas, medios, notificaciones y otros elementos del backend. También puede usarse en el frontend si se carga su hoja de estilos.
Es una icon font ligera, estable y nativa, ideal para proyectos que buscan coherencia visual con el ecosistema WordPress.
Cómo usar Dashicons en frontend
<?php
function cargar_dashicons_en_frontend() {
wp_enqueue_style('dashicons');
}
add_action('wp_enqueue_scripts', 'cargar_dashicons_en_frontend');
?>
Inserción del icono
<span class="dashicons dashicons-admin-generic"></span>
Estilización por CSS
.dashicons {
font-size: 32px;
color: #333;
}
Comparativa entre ElegantIcons, ETmodules y Dashicons
| Característica | ElegantIcons | ETmodules | Dashicons |
|---|---|---|---|
| Origen | Elegant Themes | Divi (Elegant Themes) | WordPress |
| Uso ideal | Cualquier web | Webs con Divi | Panel WP y frontend ligero |
| Tamaño del set | Alto | Alto (adaptado al builder) | Medio y funcional |
| Estilo visual | Decorativo y moderno | Decorativo y moderno | Minimalista y administrativo |
| Integración | Manual (vía @font-face) | Automática en Divi | Automática en WP admin |
| Recomendado para | Temas custom y webs sin Divi | Iconos dentro de Divi | Coherencia con WordPress |
Cómo elegir la fuente de iconos adecuada
- Si usas Divi, trabaja con ETmodules para mantener compatibilidad total con el builder.
- Si desarrollas un proyecto a medida o fuera de Divi, ElegantIcons es más flexible y portable.
- Si necesitas iconos simples, nativos y coherentes con WordPress, usa Dashicons.
Conclusión
Las icon fonts siguen siendo una solución eficaz para incorporar iconos limpios y ligeros en WordPress y Divi. ElegantIcons, ETmodules y Dashicons cubren la mayoría de necesidades, desde proyectos totalmente personalizados hasta webs construidas con Divi o sitios que buscan uniformidad con el panel de administración de WordPress.