Iconos increíbles para nuestra web con Font Awesome Icons

4
33012

Iconos increibles para nuestra web con Font Awesome Icons.

0. Índice de contenidos.


1. Introducción

En este tutorial hablaremos de Font Awesome Icons, un excelente juego de iconos para utilizar en nuestros sitios web que, además, ofrence grandes posiblidades de personalización mediante diferentes reglas de estilo.


2. Entorno.

El tutorial está escrito usando el siguiente entorno:

  • Hardware: Portátil MacBook Pro 15′ (2.2 Ghz Intel Core I7, 8GB DDR3).
  • Sistema Operativo: Mac OS Mountain Lion 10.8
  • Entorno de desarrollo: Intellij Idea 11.1 Ultimate.
  • Font Awesome Icons 3.1.1
  • Google Chrome 26
  • Mozilla Firefox 20
  • Safari 6
  • Opera 12


3. Características de Font Awesome Icons.

Entre las principales características de Font Awesome Icons podríamos destacar las siguientes:

  • Todos los iconos son imágenes vectoriales por lo que pueden ser escalables a cualquier tamaño que se desee sin perder nada de calidad.
  • A fecha de publicación de este tutorial el número de iconos que componen el set es de 302 y cada poco tiempo se van añadiendo nuevos iconos.
  • Los iconos se tratan como una fuente, no como imágenes. Cada icono es referenciado con un selector de una hoja de estilos.
  • Los iconos son totalmente personalizables: color, sombras, tamaño, animaciones, etc… Cualquier regla de una CSS puede ser aplicada a cualquier icono.
  • Diseñado para ser totalmente compatible con bootstrap


algunos iconos


4. Licencia.

Font Awesome Icons es un proyecto totalmente Open Source y compatible con licencia GPL por lo que puede ser utilizado para proyectos Open Source, proyectos comerciales o para lo que se te ocurra.

Está claro que es un proyecto al que se le han dedicado muchas horas. Dice su creador (David Gandy) que, si te gusta su trabajo, se lo puedes agradecer en http://www.shareagift.com/pages/giftpage.aspx?giftid=2472. Además, a fecha de creación de este tutorial, el chico quiere comprarse un iMac, así que toda donación será bien recibida.


5. Trabajando con Font Awesome Icons.


5.1 Descargar la hoja de estilos y las fuentes.

Existen diferentes formas de empezar a trabajar con Font Awesome, sobre todo dependiendo de si vamos a utilizar bootstrap o no.

En nuestro caso únicamente utilizaremos Font Awesome, por lo que nos hará falta la hoja de estilos y las fuentes que serán cargadas por ésta.

Una vez tenemos la hoja de estilos necesitaremos las fuentes que se cargarán (donde están los iconos).

Por último las añadimos a un directorio font/ que crearemos a la altura de nuestro directorio css/.

Tendríamos algo así:

Estructura

Donde FontAwesomeIcons.html será nuestra página .html para nuestro ejemplo y css/estilos.css será una hoja de estilos para crear reglas adicionales.


5.2 Incorporando la hoja de estilos a nuestro documento.

El siguiente paso es añadir la hoja de estilos a la cabecera de nuestro documento .html:

<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
    <title>Ejemplo de Font Awesome Icons!</title>
    <link type="text/css" rel="stylesheet" href="css/font-awesome.min.css"/>
    <link type="text/css" rel="stylesheet" href="css/estilos.css?14052013"/>    
</head>


5.3 Añadiendo iconos a nuestro documento.

Pues bien, ya podemos empezar a pintar nuestros iconos. Lo haremos con el tag <i>. Para que se nos pinte un icono, bastaría con crear un tag de este tipo y asignarle una regla de estilo de nuestra hoja. Cada icono tiene su regla. El listado de iconos y reglas asociadas al set está aquí.

Por ejemplo, si yo quisiese añadir un icono de un signo musical, vemos en el listado anterior que la regla de estilo que le corresponde es icon-music, por lo que añadiendo lo siguiente a nuestro .html:


Tendríamos nuestro icono musical:

Icono music

Además, como dijimos anteriormente, todos los iconos pueden personalizarse con más reglas. La hoja de estilos de Font Awesome trae bastantes reglas ya predefinidas, aunque nosotros también podemos añadir las nuestras. En este enlace pueden verse diferentes ejemplos de juegos de reglas para personalizar nuestros iconos. De este modo, si quisiésemos duplicar el tamaño por defecto de nuestro icono (que irá en proporción al tamaño de la fuente) añadiríamos la regla icon-2x a nuestro icono:


Y jugando con este tipo de reglas y con las que nosotros nos creemos tendremos un amplio juego de posibilidades de personalización de nuestros iconos 😀

ejemplos

VER EJEMPLO

6. Referencias.


7. Conclusiones.

En este tutorial hemos visto un magnífico juego de iconos, totalmente personalizables, para utilizar en nuestras webs. Bueno, bonito y barato ¿se puede pedir más en estos tiempos de corren?

Espero que este tutorial os haya sido de ayuda. Un saludo.

4 COMENTARIOS

DEJA UNA RESPUESTA

Por favor ingrese su comentario!

He leído y acepto la política de privacidad

Por favor ingrese su nombre aquí

Información básica acerca de la protección de datos

  • Responsable:
  • Finalidad:
  • Legitimación:
  • Destinatarios:
  • Derechos:
  • Más información: Puedes ampliar información acerca de la protección de datos en el siguiente enlace:política de privacidad