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”;}

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="&#x37;"></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