Introducción
Ya 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
- Getting started with FontAwesome
https://fontawesome.com/how-to-use/on-the-web/setup/getting-started?using=web-fonts-with-css - Sass (SCSS)
https://fontawesome.com/how-to-use/on-the-web/using-with/sass - Icon List
https://fontawesome.com/icons?d=gallery - The Correct Way to Configure Font Awesome 5 in Laravel 5.6
https://www.youtube.com/watch?v=XPH2fatTLVg