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.

font-awesome-download

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:

@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:

<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:

body {
    font-family: "FontAwesome";
}

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

<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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (5 votos, promedio: 4,20 de 5)
Cargando…

Comparte en las redes sociales

Escrito por Jose Aguilar - Experto programador Prestashop y Wordpress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*