Ligature Symbols, una fuente gratis de iconos para web

Ligature Symbols es una fuente gratuita para web y está especialmente diseñada para crear elementos deinterfaces de usuarios (UI). En esta fuente podremos encontrar alrededor de 240 iconos y entre ellos se encuentran, redes sociales, exploradores, elementos de menú, elementos de usuarios, formatos de texto, etc.

En captura puedes visualizar algunos de los iconos

UN POCO DE INFO

Ligature Symbols fue creada por el diseñador japones Kazuyuki Motoyama y es totalmente gratuita. La fuente se encuentra bajo la licencia SIL Open Font License para descargar y usar.

Ligature Symbols soporta la mayoría de los exploradores modernos (Chrome, Safari, Firefox, IOS – Safari móvil, Explorador Android, IE7+)

Me gusta! quiero instalarla

Para instalarla, primero debemos bajarla para ponerla en nuestro servidor. Ya hecho este paso tenemos que incluirla con @font-face en nuestro CSS y además, crearemos dos estilos que será como haremos que aparezca el icono en nuestra página.

/* CSS */
@font-face {
 font-family: 'LigatureSymbols';
 src: url('LigatureSymbols-2.09.eot');
 src: url('LigatureSymbols-2.09.eot?#iefix') format('embedded-opentype'),
 url('LigatureSymbols-2.09.woff') format('woff'),
 url('LigatureSymbols-2.09.ttf') format('truetype'),
 url('LigatureSymbols-2.09.svg#LigatureSymbols') format('svg');
 src: url('LigatureSymbols-2.09.ttf') format('truetype');
 font-weight: normal;
 font-style: normal;
}
.lsf {
 font-family: 'LigatureSymbols';
 -webkit-text-rendering: optimizeLegibility;
 -moz-text-rendering: optimizeLegibility;
 -ms-text-rendering: optimizeLegibility;
 -o-text-rendering: optimizeLegibility;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-font-smoothing: antialiased;
 -ms-font-smoothing: antialiased;
 -o-font-smoothing: antialiased;
 font-smoothing: antialiased;
}
.lsf-icon:before {
 content:attr(title);
 margin-right:0.3em;
 font-size:130%;
 font-family: 'LigatureSymbols';
 -webkit-text-rendering: optimizeLegibility;
 -moz-text-rendering: optimizeLegibility;
 -ms-text-rendering: optimizeLegibility;
 -o-text-rendering: optimizeLegibility;
 text-rendering: optimizeLegibility;
 -webkit-font-smoothing: antialiased;
 -moz-font-smoothing: antialiased;
 -ms-font-smoothing: antialiased;
 -o-font-smoothing: antialiased;
 font-smoothing: antialiased;
}

Con esto, ya tenemos la fuente instalada, recuerda que si colocas la fuente en otra carpeta deberás modificar la dirección de la fuente en el @font-face

VEMOS COMO USARLA EN EL HTML

Si queremos usarlo solo, podemos utilizar la clase .lsf y escribir dentro el nombre del icono, en este caso como escribí mail, me aparece el icono de mail en lugar del texto.

<p>Usandola como ícono para el correo</p>
<a href="mailto:mail@example.com" class="lsf">mail</a>

En el segundo caso, utilizamos el icono acompañado de un texto, para usarlo de esta manera pondremos la clase .lsf-icon y en el title pondremos el nombre del icono.

<p>Usando el ícono acompañado con texto</p>
<a href="http://twitter.com/" class="lsf-icon" title="twitter">Twitter</a>
Scroll to top