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.

Nota

• Los pasos mencionados en este tutorial pueden variar en un futuro, esto no depende de nosotros si no de los Desarrolladores que dan soporte a Font Awesome.

 

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.