WEB APPS
Typographic Icons to use on your website with 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-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.
ETmodules icons
Divi icons (ETmodules) work as a special typeface. To use them on any website, you must load the font and then insert the icon using its Unicode value. You can do this in three ways: in HTML, with custom attributes, or directly through CSS.
1. Load the ETmodules font
Add the following block inside the <head> of your site or inside a code module:
<style>
@font-face {
font-family: 'ETmodules';
src: url('https://www.yoursite.com/path/ETmodules.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>Remember to replace the URL with the real location of the ETmodules.ttf file on your server.
2. Insert an ETmodules icon in HTML
You can display an icon directly by using its Unicode value in HTML hexadecimal format:
<p aria-hidden="true"></p>This method is useful when you want to place icons directly inside the content.
3. Insert icons using a custom attribute (data-icon)
You can also define the icon inside a custom attribute and let CSS render it:
<p aria-hidden="true" data-icon=""></p>And in your stylesheet:
[data-icon]:before {
font-family: 'ETmodules';
content: attr(data-icon);
}This approach keeps your HTML clean and makes it easy to reuse icons across multiple elements.
4. Insert icons through CSS using the content property
You can also add icons before or after any element using CSS:
h2:before {
font-family: 'ETmodules';
content: "\e001";
}Here you must use the same Unicode value, but without the HTML syntax. The difference is:
- HTML: 
- CSS: “\e001”
Both represent the same icon, but each follows the syntax of the language in which it is used.
CSS: \e000
CSS: \e001
CSS: \e002
CSS: \e003
CSS: \e004
CSS: \e005
CSS: \e006
CSS: \e007
CSS: \e008
CSS: \e009
CSS: \e00a
CSS: \e00b
CSS: \e00c
CSS: \e00d
CSS: \e00e
CSS: \e00f
CSS: \e010
CSS: \e011
CSS: \e012
CSS: \e013
CSS: \e014
CSS: \e015
CSS: \e016
CSS: \e017
CSS: \e018
CSS: \e019
CSS: \e01a
CSS: \e01b
CSS: \e01c
CSS: \e01d
CSS: \e01e
CSS: \e01f
CSS: \e020
CSS: \e021
CSS: \e022
CSS: \e023
CSS: \e024
CSS: \e025
CSS: \e026
CSS: \e027
CSS: \e028
CSS: \e029
CSS: \e02a
CSS: \e02b
CSS: \e02c
CSS: \e02d
CSS: \e02e
CSS: \e02f
CSS: \e030
CSS: \e031
CSS: \e032
CSS: \e033
CSS: \e034
CSS: \e035
CSS: \e036
CSS: \e037
CSS: \e038
CSS: \e039
CSS: \e03a
CSS: \e03b
CSS: \e03c
CSS: \e03d
CSS: \e03e
CSS: \e03f
CSS: \e040
CSS: \e041
CSS: \e042
CSS: \e043
CSS: \e044
CSS: \e045
CSS: \e046
CSS: \e047
CSS: \e048
CSS: \e049
CSS: \e04a
CSS: \e04b
CSS: \e04c
CSS: \e04d
CSS: \e04e
CSS: \e04f
CSS: \e050
CSS: \e051
CSS: \e052
CSS: \e053
CSS: \e060
CSS: \e061
CSS: \e062
CSS: \e063
CSS: \e064
CSS: \e06b
CSS: \e06c
CSS: \e06d
CSS: \e06e
CSS: \e06f
CSS: \e070
CSS: \e077
CSS: \e078
CSS: \e079
CSS: \e07a
CSS: \e07b
CSS: \e082
CSS: \e083
CSS: \e084
CSS: \e098
CSS: \e099
CSS: \e09a
CSS: \e09b
CSS: \e09c
CSS: \e0a3
CSS: \e0a4
CSS: \e0a5
CSS: \e0a6
CSS: \e0a7
CSS: \e0ae
CSS: \e0af
CSS: \e0b0
CSS: \e0b1
CSS: \e0b2
CSS: \e0b3
CSS: \e0ba
CSS: \e0bb
CSS: \e0bc
CSS: \e0bd
CSS: \e0be
CSS: \e0bf
CSS: \e0c4
CSS: \e0c5
CSS: \e0c6
CSS: \e0c7
CSS: \e0c8
CSS: \e0c9
CSS: \e0ca
CSS: \e0cb
CSS: \e0d3
CSS: \e0d4
CSS: \e104
CSS: \e105
CSS: \e106
CSS: \e107
CSS: \e108
CSS: \e109
CSS: \e110
CSS: \e111
CSS: \e112
CSS: \e113
CSS: \e114
CSS: \e115
CSS: \e11c
CSS: \e11d
CSS: \e11e
CSS: \e11f
CSS: \e120
CSS: \e121
CSS: \e128
CSS: \e129
CSS: \e12a
CSS: \e12b
CSS: \e12c
CSS: \e12d
CSS: \e135
CSS: \e136
CSS: \e137
CSS: \e138
CSS: \e139
CSS: \e150
CSS: \e151
CSS: \e152