Font Awesome y Fontello: iconos escalables
Si alguna vez has trabajado con una template moderna, tanto en HTML5 puro como para Joomla o Wordpress, te sonará entonces Font Awesome. De hecho, en casi todas las templates comerciales verás una serie de iconos casi todos iguales (ese es su principal problema!!!) que funcionan bien tanto en pequeño como en grande, sin perder calidad.
Son los iconos de la fuente Font Awesome, un kit de iconos vectoriales basado en CSS y LESS, creado por Dave Grady para usar con Twitter Boostrap y posteriormente incorporado en el BoostrapCDN.
Es muy fácil de usar y sólo tienes que incorporarla en tu web, descargando el kit de CSS y fuentes, que posteriormente tendrás que subir al servidor de tu web, normalmente a una carpeta CSS para el archivo font-awesome.min.css y a una carpeta FONTS para las fuentes.
Luego simplemente los incorporas en el HTML de esta forma:
<link rel="stylesheet" href="/tucarpeta/css/font-awesome.min.css" >
y con esto ya puedes usar toda la colección de iconos, simplemente insertando luego a lo largo de los contenidos de tu página web etiquetas como esta:
<i class='fa fa-facebook'></i>
Esto mostrará un fantástico icono para linkar tu facebook que lo pongas al tamaño que lo pongas, siempre se verá perfecto, sin pixelar y con los bordes perfectamente definidos.
La colección completa se amplia periodicamente, y puedes verla en la web oficial del proyecto: https://fortawesome.github.io/Font-Awesome/icons/
Fontello
Pero aun siendo un buen número de ellos, no existen iconos para todas las aplicaciones posibles; y es que trabajando en la web de un hotel rural, me dí cuenta de que necesitaría un iconset específico. Y fué así como llegué hasta la colección de iconos turísticos Fontello, que puedes ver en un ejemplo en: http://wa-galgool.com/fontello-turistic/demo.html
En realidad, Fontello es un generador de iconos con el que puedes realizar tu propia coleccion, y luego "empaquetarla" en un formato de fuente que podrás usar de la misma forma que usas Font Awesome. Eso te permite usar gráficos icónicos de tu propio diseño en tu web, de forma que sean escalables, pese muy poco y sean increiblemente fáciles de usar y reusar.
http://fontello.com es la web oficial del proyecto
La generación de una colección propia es muy sencilla: escoges los iconos que quieres usar de entre los que ya existen creados por proveedores externos (Font Awesome, Fontelico, Zocial, Elusive, Entypo...) simplemente haciendo click en ellos en la web oficial, o bien los creas en formato SVG y los arrastras a la zona gris que verás en la web de Fontello (bajo el titulo "Custom Icons"), le das un nombre, pulsas en "download" y listo. Fácil-fácil.
Luego, como con Font Awesome, los incorporas a tu web con la tag siguiente:
<link type="text/css" rel="stylesheet" href="/css/nombre.css" />
y ya puedes empezar a usarlos (revisa el archivo demo.html que se habrá descargado, ahí están todos los ejemplos)
