Una simple técnica para botones con glyphs

Una simple técnica para botones con glyphs

En una época utilizabamos imágenes para decorar nuestros botones, posteriormente juntamos varias y creamos sprites. Ahora esta de moda utilizar los glyphs. En este artículo mostramos una simple técnica para incluirlos en nuestros links o botones.

Como una pequeña introducción hay que tener en cuenta que los glyphs no son nada mas que una fuente como Arial o Helvetica, con la unica diferencia que en vez de usar caracteres normales utilizan imágenes vectoriales. Son bastante útiles para colocar íconos en nuestros sitios web ya que tienen la ventaja de ser vectoriales, es decir que los podremos agrandar o achicar sin perder resolución. Como desventaja solo utilizan un color, esto puede no ser un problema ahora que se usa mucho el diseño plano, aunque existen técnicas un poco complicadas para tener glyphs multicolores.

Crear una fuente que contenga nuestros iconos para la web puede ser todo un dolor de cabeza y bastante impráctico si necesitamos algo relativamente rápido y sencillo. Es por eso que en este artículo utilizaremos la fuente más popular actualmente llamada Font Awesome (1). Esta fuente ofrece una variedad interesante de íconos (mas de 600 hasta la fecha).

Para instalar Font Awesome en tu sitio web existen varios métodos, el más sencillo es el de colocar el siguiente código en tu página HTML, específicamente en la sección HEAD:

El método anterior utiliza un archivo CSS que está alojado en un sitio web externo. Si deseas instalarlo en tu servidor debes descargar todo el directorio de Font Awesome y colocar la referencia CSS en la sección HEAD de tu sitio web:

La forma mas sencilla de utilizar los glyphs de Font Awesome es la de utilizar las clases por defecto fa fa-nombre-del-icono. Por ejemplo:

La lista completa de los iconos la puedes encontrar en: http://fontawesome.io/icons/

Bueno, pues solo te queda experimentar con las diferentes opciones. En un artículo futuro explicare como crear tus propios íconos y utilizarlos en tu sitio web.

Links adicionales

(1) Sitio web de Font Awesome: http://fontawesome.io/