Crea tu propia tipografía de iconos con Fontello

Crea tu propia tipografía de iconos con Fontello

Fontello

Hace tiempo revisamos la forma de usar Font Awesome, una tipografía que incluye muchos de los iconos que podemos necesitar en una página web o un blog, por ejemplo iconos de redes sociales. Al tratarse de una fuente tipográfica tiene una clara ventaja sobre las imágenes, la liviandad y el ahorro en transferencia.

Ahora me he encontrado con una herramienta fantástica que me permite crear mi propia fuente tipográfica, seleccionado los iconos que yo quiero entre varias tipografías como Font Awesome, Fontelico, Entypo, etc.

Se llama Fontello, y su uso es tan sencillo que puedes crear una tipografía de iconos personalizada en menos de un minuto. Simplemente hay que seleccionar los iconos deseados, ponerle un nombre a la tipografía y pulsar en el botón Download Webfont.

Eso nos descargará un archivo zip en el que estarán todos los elementos necesarios para implementar la tipografía en el blog. Entre esos archivos veremos que hay varios css así como la propia fuente en formato eot, svg, ttf y woff.

Para implementar la tipografía en el blog podemos subir la carpeta descomprimida a la carpeta del theme que estemos usando en el blog. Eso sí, debemos darle un nombre sencillo, por ejemplo ‘fontello’. Una vez hecho esto hay que ajustar las url de los archivos css. En nuestro caso debemos apuntar todos los src de los archivos css a la url fontello/font/mia.eot (donde ‘mia’ es el nombre que le hemos dado a la tipografía, y así con el resto de formatos).

Fontello css

Luego editaremos el archivo header.php del theme para introducir una llamada al archivo css principal de la tipografía. El código debe ir entre las etiquetas head, y sería algo así

<link rel="stylesheet" href="<?php bloginfo('url'); ?>/fontello/css/mia.css" type="text/css" media="screen" />

Donde mia.css, una vez más, debemos sustituirlo por el nombre que hemos dado a nuestra tipografía.

Ahora ya está todo listo para implementar la tipografía en el blog. Allí donde queramos que aparezcan los iconos debemos insertar el código de esta forma:

<i class="icon-facebook"></i>

En este ejemplo usamos uno de los iconos de Facebook que hemos añadido a nuestra tipografía. En el archivo css principal tendréis el resto de clases que se pueden usar, y que se corresponden con los iconos elegidos. En la imagen podeis ver los 7 iconos que componen la tipografía de ejemplo que he creado.

Captura de pantalla 2013 01 28 a la s 11 53 36

Sitio Oficial: Fontello