Font Awesome

Font Awesme es una fuente impresionante que le facilita la incorporación de iconos escalables permitiendo cambiar el tamaño, color, sombreado y todo lo que permite el poder de las hojas de estilo CSS.

Principales características

• Una fuente y más de 500 iconos personalizables
• No requiere javascript
• Escalabilidad infinita
• Código libre y gratuito
• Manejo de los iconos con css
• Adaptable a todos los dispositivos
• Compatible con Bootstrap
• etc

Instalarlo en tu página Web no es muy difícil. Lo primero que tienes que hacer es descargar el paquete de la fuente.

Dentro del paquete verás que hay una carpeta de fonts que es la que tienes que copiar en tu proyecto e incluir los archivos font en tu hoja de estilo principal de la siguiente forma:

Source code

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

Aparte de esto, también tienes que incluir en la cabecera de tus páginas la hoja de estilos incluida en el paquete de descarga:

Source code

<link rel="stylesheet" href="css/font-awesome.min.css">

Para añadir el estilo de la tipografía Font Awesome tan solo tienes que añadir lo siguiente en tu hoja de estilos:

Source code

body {
    font-family: "FontAwesome";
}

Para mostrar los iconos lo puedes hacer así por ejemplo, utilizando las class que tiene preparado:

Source code

<i class="icon-plus"></i>

Es una fuente bastante atractiva y además incorpora todos esos iconos personalizables que hacen que muchos gestores de contenido o plataformas de ecommerce como Prestashop lo consideren para utilizarlo en sus plantillas.

Ver ejemplos de la iconografía que incorpora esta tipografía

Ver todos los iconos disponibles