Font Awesome es un framework que permite insertar iconos de forma sencilla y rápida a un proyecto.

INSTALAR FONT AWESOME

Fontawesome dispone de varios métodos para poder añadir los iconos, uno de ellos es la descarga para web. Para ello es necesario dirigirse a la opción de descarga desde fontawesome.

El archivo descargado contiene distintas carpetas una vez descomprimido,de los cuales para este ejemplo solamente es necesario el archivo all.css del directorio css y el directorio completo webfonts. Para el correcto funcionamiento de fontawesome es necesario situar la carpeta webfonts un nivel por encima del archivo all.css.  Para ello se copia el directorio webfonts completo en el directorio destinado a estilos css y se crea una nueva carpeta en la que se copia el archivo all.css. Ya solo queda registrar el archivo all.css en la cabecera del proyecto indicando la ruta completa.

<link href="{{ asset('css/all.css') }}" rel="stylesheet" type="text/css">

VERSIONES DE ICONO

Existen cinco versiones o tipos distintos de icono:

• SOLID
• REGULAR
• LIGHT
• DUOTONE
• BRANDS

Las versiones solid y brands son gratuitas mientras que el resto requieren de licencia Pro.

AÑADIR ICONO

Añadir un icono es realmente sencillo, es suficiente con añadir un enlace:

<i class="fas fa-camera"></i>

El prefijo fas se refiere a la versión solid y el fa-camera indica el tipo de icono que se puede seleccionar desde la sección de iconos de fontawesome.

TIPOS DE ICONOS

Es preciso explicar que en versiones anteriores el prefijo era fa pero a partir de la versión 5 cada tipo de icono dispone de un prefijo distinto.

Tal como indica la documentación cada tipo de icono se identifica con un prefijo distinto.

• SOLID -> fas
• REGULAR -> far
• LIGHT -> fal
• BRANDS -> fab

ESTILOS 

FontAwesome permite dar estilo a los iconos de igual forma que se le da estilo a una clase de cualquier elemento. 

.fa-camera{
    color: #000;
}

Como también dispone de distintos tamaños añadiendo sufijos similares a las utilizadas  en  bootstrap (sm,md,lg,xl).

<i class="fas fa-camera fa-lg"></i>