Usando iconos sin imágenes con Font Awesome

Font Awesome es una fuente  que podemos usar para implementar   iconos sin necesidad de imágenes  y sin técnicas intrusivas.

La mayoría de iconos que podemos usar con Font Awesome  están relacionados a acciones que regularmente llevamos a cabo  en sitios o aplicaciones web por lo que es ideal para implementar en este tipo de proyetos .

Dentro de sus características se encuentran :

  • Fácil implementación con CSS, no necesitamos JavaScript y podemos modificar propiedades como color , tamaño , sombra etc.
  • SVG  significa cada icono se ve impresionante en cualquier tamaño.
  • Soporte para IE7 sin necesidad de hacks
  • Soporte para retina display ,  lo que significa que son magníficos en pantallas de alta resolución.
  • Está pensado para trabajar correctamente con Twitter Bootstrap 2  pero tambien se puede usar de forma
  • Es gratis! Puedes incluirlo en tus proyectos.

 

Instrucciones para implementarlo sin bootstrap :

  1. Descargamos los archivos  del sitio web oficial.
  2. Copiamos el contenido de la carpeta  /font y los archivos de la carpeta /css a un directorio de nuestro sitio.
  3. Modificamos la ruta donde se encuentra la fuente font-awesome:

4.-Enlazamos dentro de la etiqueta <head> los archivos font-awesome.min.css y font-awesome-ie7.min.css ( solo para iE)

5.- Aplicamos  un  estilo a nuestro elemento html con el icono que deseemos mostrar :

  1. Listo debemos ver un icono con la famosa ” ” de facebook  , aquí esta la lista completa de iconos y su respectivo estilo.

En la documentación nos indican  otras formas de implementarlo como por ejemplo usando .less para bootstrap.

Font-awesome ya viene con algunos estilos  css predefinidos para modificar el tamaño , pero tambien se puede modificar mediante la propiedad font-size como lo hacemos regularmente en elemento de texto.

Es de gran ayuda para cualquier proyecto web.

Enlace : Font Awesome
No Responses

Leave a Reply

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