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 :

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

@font-face {
  font-family: 'FontAwesome';
  src: url('../font/fontawesome-webfont.eot?v=3.0.1');
  src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
    url('../font/fontawesome-webfont.woff?v=3v=3.0.1') format('woff'),
    url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
  font-weight: normal;
  font-style: normal;

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

<link rel="stylesheet" href="css/font-awesome.min.css">
<!--[if IE 7]>
<link rel="stylesheet" href="css/font-awesome-ie7.min.css">
<![endif]-->

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

<span class="icon-facebook"></span>

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

Usando iconos sin imágenes con Font Awesome

1 comentario

Deja una respuesta Cancelar la respuesta