WEB APPS
Iconos Tipográficos para utilizar en tu web con CSS
Si eres diseñador web ya conoces las tipografías de iconos o iconos tipográficos. Hay varias tipografías con iconos que puedes utilizar, y depende del theme que utilices en tu WordPress, Joomla, Prestashop, etc tendrá implementado uno u otro. La mejor opción es utilizar la tipografía de iconos que viene «de serie» en cada theme, pero si además quieres usar otro te muestro a continuación los que más utilizo.
Dashicon
Es la tipografía de iconos oficial del administrador de WordPress. Tiene 303 iconos.
Puedes ver todos los iconos en https://developer.wordpress.org/resource/dashicons/#wordpress
Cómo meter iconos en mi web
- Copia en tu página el código HTML del icono que te interesa, por ejemplo:
<span class=»dashicons dashicons-wordpress»></span>
- O puedes hacerlo mediante CSS, añadiendo en tu class: content: «\f120»;
- Por ejemplo: .icono-logo-wordpress:after{content: «\f120»;}
Menú de administrador | Admin menu
Pantalla de bienvenida
Formatos de publicaciones
Media
Edición de imagen
TinyMCE
Pantalla de publicaciones
Clasificación
Social
WordPress.org específico: trabajos, perfiles, WordCamps
Iconos de BuddyPress y BBPress
Products
Taxonomies
Widgets
Notificaciones
Varios
ICONOS ETMODULES
Para usar estos iconos tan solo debes incluir estas líneas en tu web:
<style>@font-face {
font-family: 'eleganticons';
src: url('https:www.tuWeb/tu-ruta/ElegantIcons.ttf') format('truetype'); // NO OLVIDES CAMBIAR ESTO
font-weight: normal;
font-style: normal;
}
</style>
Y después añadirlos en el HTML así:
<p aria-hidden="true" data-icon="7"></p>
[data-icon]:before { font-family: 'ElegantIcons';o con su código css (es el mismo código pero quitándole el &#x:
h2:before {content: "\37";font-family: 'ETmodules';}ICONOS ETMODULES