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.
[…] estilos : planos , redondos,cuadrados, con efectos de sombra y relleno , incluso puedes usar FontAwesome para incrustar iconos dentro del […]