Comunidad de diseño web y desarrollo en internet

Font Awesome, iconos vectoriales para Bootstrap

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.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate