Instalar FontAwesome en Laravel 5.x

Introducción

FontAwesomeYa que los iconos de Bootstrap han sido removidos de la distribución, se recomienda que se utilicen iconos de terceros en los proyectos web.  FontAwesome es una excelente alternativa para estas imágenes.

A continuación se describen los pasos realizados para su instalación en un proyecto de Laravel.

Procedimiento

Instalación de la librería de fuentes de íconos y especificación de la dependencia.

$ npm install

$ npm install @fortawesome/fontawesome-free --save

Referenciar la librería desde scss para instalar las fuentes y la especificación de los íconos disponibles.

$ vi resources/sass/app.scss

// ...
$fa-font-path: "../webfonts";
@import '~@fortawesome/fontawesome-free/scss/fontawesome.scss';
@import '~@fortawesome/fontawesome-free/scss/solid.scss';
@import '~@fortawesome/fontawesome-free/scss/brands.scss';
@import '~@fortawesome/fontawesome-free/scss/regular.scss';

Compilar los nuevos recursos según según el guión de scss.

$ npm run dev

Uso

Para utilizar los íconos de esta librería, cree entidades como la siguiente con las clases correspondientes a las imágenes deseadas según la tabla de íconos.

<i class="fa fa-user"></i>

Recursos

  1. Getting started with FontAwesome
    https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css
  2. Sass (SCSS)
    https://fontawesome.com/how-to-use/on-the-web/using-with/sass
  3. Icon List
    https://fontawesome.com/icons?d=gallery
  4. The Correct Way to Configure Font Awesome 5 in Laravel 5.6
    https://www.youtube.com/watch?v=XPH2fatTLVg