Gestionar iconos con Font Awesome

Tutoriales

Alguna ves hemos visto en otras Páginas webs que los iconos encajan perfecto y mantienen el mismo formato. Vale resaltar que si una web, un sistema administrador, aplicación, etc. no tiene un formato que siempre se vea en todas las paginas, se va ver un poco desordenado y poco profesional.

Los grandes diseñadores Front -End suelen usar mucho Font Awesome, es la gama de iconos para tus proyectos mas completa que hay y también una de las mejores junto a Glyph icons.

Nota: Estoy usando la version: Font Awesome 4.4.0 para este tutorial.
En este tutorial les voy a enseñar a como implementar Font Awesome Icons para que lo pueda aplicar a sus proyectos, bueno vamos con el tutorial:

Implementar Icono

Primero nos dirigimos a: https://fortawesome.github.io/Font-Awesome/, Descargamos el archivo comprimido de Font Awesome icons, luego lo descomprimimos en la carpeta de nuestro proyecto.

Instanciamos el archivo CSS a nuestro proyecto Web:

Ahora en nuestro HTML escribimos la clase: fa fa-facebook, para instanciar el icono de Facebook:

 

Y obtendremos nuestro primer icono:
– Icono de Facebook por Defecto

 

También podemos aumentar el tamaño de nuestro icono, veamos la tabla a continuación:

Icono Nombre Clase CSS
Cámara Retro lg fa fa-facebook fa-lg
Cámara Retro 2x fa fa-facebook fa-2x
Cámara Retro 3x fa fa-facebook fa-3x
Cámara Retro 4x fa fa-facebook fa-4x
Cámara Retro 5x fa fa-facebook fa-5x

Iconos Animados

Para nuestros proyectos en donde cargamos el contenido con Ajax o similar, podemos emplear los iconos animados de Font Awesome:

– Spinner

– Circle Spinner

– Refresh

– Cog

– Spinner

Si deseas usar otro icono y necesitas saber su clase CSS, puedes consultar acá: https://fortawesome.github.io/Font-Awesome/icons/

Espero te sirva de Mucho el tutorial
Gracias por tu amable atención.

Newsletter

Suscríbete a Nuestro Boletín de Novedades:

(Luego de la suscripción no te va salir ningun mensaje. Solo revisa tu bandeja de Correo para confirmar tu suscripción)
* indicates required