Font Awesome es una colección de iconos vectoriales compatible con Bootstrap, de código abierto y uno de los más populares de Github. Al ser vectores estos no se pixelan, lo que lo hace ideal para usarlos en diseños con Responsive Design.
Además de usarlo con Bootstrap puedes descargar el paquete de iconos desde Github.
Usar Font Awesome con Bootstrap
Para usarlo en un proyecto con Bootstrap, una manera de proceder es llamar los iconos a través de una etiqueta i y una clase. Veamos un ejemplo:
Código :
<html> <head> <title>font awesome</title> <link rel="stylesheet" href="css/bootstrap.css"> </head> <body> <button type="button" class="btn btn-primary "><i class="icon-music icon-white"></i>music</button> </body> </html>
Ahora bien, esta no es la manera más adecuada ya que Bootstrap usa un sprite que está en PNG y por ende los iconos se pixelan.
La mejor forma de usarlo es descargando el paquete y enlazando nuestro CSS. Debemos pegar la carpeta font-awesome dentro de nuestro proyecto. Por ejemplo:
Código :
<html> <head> <title>font awesome</title> <link rel="stylesheet" href="font-awesome/css/font-awesome.css"> </head> <body> <i class="icon-facebook-sign icon-2x"></i> <i class="icon-twitter-sign icon-2x"></i> <i class="icon-google-plus icon-2x"></i> </html>
Personalizar los iconos con CSS
Podemos personalizar nuestros iconos a través de CSS mediante clases:
Código :
.icon-facebook-sign{
color:#3b5998;
}
.icon-twitter-sign{
color:#00aced;
}
.icon-google-plus-sign{
color:#dd4b39;
}
Para saber más de Font Awesome y cómo utilizar los iconos ls dejo el proyecto en github.
¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.
Pueden usar el script de Font Awesome directamente desde un CDN provisto por MAXCDN para que el proyecto les cargue mucho más rápido. También pueden usar el de Bootstrap desde ahi mismo.
Por yograterol el 29 de Noviembre de 2013
http://getbootstrap.com/components/#glyphicons
Pero aun asi se puede seguir usando Font Awesome con versiones anteriores o por tu cuenta.