Web Icon Fonts

mar 13, 2015

Basta con darse una vuelta por GitHub para afirmar que las Icon Fonts están de moda, han llegado para quedarse y FontAwesome es el repositorio estrella.

icon-fonts-github

Pero vayamos por partes.

Qué son las Icon Fonts.

Se trata de fuentes tipográficas de iconos. Nada nuevo bajo el sol. ¡Hola Dingbats!

La novedad radica en su implementación como webfonts, es decir como tipografías para web.

Cuándo surgieron y por qué.

El pistoletazo de salida probablemente lo dieron los frameworks de HTML/CSS/JS, Bootstrap Twitter y Foundation. Su popularización ha ido de la mano con el desarrollo de estas nuevas fuentes tipográficas. De hecho, FontAwesome nació con Bootstrap, aunque ahora vuela libre y Glyphicons se ha convertido en su tipografía de iconos oficial.

La apuesta de de ambos frameworks está en proporcionar un entorno de desarrollo de interfaces web adaptables a cualquier dispositivo y resolución, de manera ágil. Y es en esa apuesta por los diseños escalables que priman la rapidez de carga y de desarrollo, donde las Icon Fonts cobran todo su sentido.

Durante muchos años los PNGs y la técnica CSS Image Sprite - utilización de una sola imagen con todos los iconos del website combinada con la propiedad CSS background-position -, han reinado entre los maquetadores web, pero la necesidad de desarrollos que funcionen independientemente del dispositivo de visualización obligan a utilizar formatos de imagen escalables. Es ahí donde el SVG (Scalable Vector Graphic), gráfico vectorial que se puede escalar hasta el infinito sin perder calidad, hace su aparición estelar.

En las Icon Fonts, cada icono es un SVG tratado como fuente no como imagen, con lo que son susceptibles de modificaciones varias a través de CSS: color, tamaño, sombreado, animaciones, etc. La única pega, en este sentido, es que los iconos deberán ser monocromos, o a lo sumo admitirán gradientes de color. Para iconos complejos y multicolor, habrá que seguir funcionando con PNGs…

Iconos VALBHY

Cómo utilizarlas.

Como hemos señalado FontAwesome parece ser la más popular, si bien Foundation Icon Fonts 2 y Glyphicons, le siguen de cerca.

Para usarlas basta con bajarse la fuente, guardar la carpeta entera en nuestro proyecto web y linkar el css correspondiente o hacer la llamada en nuestra hoja de estilos a la tipografía mediante @font-face.

Cada librería funciona de manera diferente, si bien las premisas son las mismas:

· FontAwesome lo pone muy fácil, pues aparte de la posibilidad de descarga, proporciona también un enlace CDN (Content Delivery Network) por lo que ni siquiera hay que bajarse la librería, sino que basta con linkarla desde el <head>:

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

A continuación introducimos el código correspondiente en el HTML, por ejemplo <i class=”fa fa-camera-retro”></i> y ya tendríamos el icono de cámara retro en nuestra página. Aquí la chuleta con el listado completo de iconos.

· Foundation utiliza también la etiqueta <i> para hacer la llamada a los iconos <i class=”foundicon-[icon]“></i>, si bien en este caso, hay que bajarse la librería, subirla a nuestro proyecto web y hacer la llamada a la fuente a través de nuestra hoja de estilos o llamando a las hojas de estilos que nos hemos descargado.

· Glyphicons no está disponible de manera gratuita para funcionar de forma autónoma, sino que la versión gratis funciona en dependencia con Bootstrap Twitter. Por eso, no nos vamos a extender y lo dejamos para otro post donde hablemos del framework de Twitter. De todas formas, a quien pueda ineresar, aquí está la información de uso: http://getbootstrap.com/components/

Pero, todavía no hemos llegado a lo mejor. ¿Que el icono que tienes en la cabeza no está en ninguna de estas librerías? ¡No pasa nada! Ahí están Fontello o IcoMoon para que puedas dar rienda suelta a tu creatividad. Se trata de dos aplicaciones muy similares, que funcionan por un lado, como agregadoras de distintas librerías de iconos ya existentes, y por otro, como generadoras de fuentes tipográficas propias a través de SVG que el usuario sube a la plataforma.

De esta forma, es posible crear colecciones de iconos únicas para nuestros proyectos web. Podemos seleccionar iconos de las distintas librerías disponibles en dichas aplicaciones, así como subir nuestros propios iconos, y a partir de ahí, generar nuestra propia fuente tipográfica, descargarla y empezar a usarla.

Para usuarios curiosos y avezados, he aquí la documentación de uso:

No comments

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *


*

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>