Fontawesome in Laravel

 npm install --save-dev vite

 

npm install --save @fortawesome/fontawesome-free

 

 Edit or create resources/css/app.css and add the following code:

@import '@fortawesome/fontawesome-free/css/fontawesome.css';
@import '@fortawesome/fontawesome-free/css/regular.css';
@import '@fortawesome/fontawesome-free/css/solid.css';
@import '@fortawesome/fontawesome-free/css/brands.css'; 

Edit or create vite.config.js file in the root directory of your Laravel project and configure Vite to bundle Font Awesome along with your asset

import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.js'],
            refresh: true,
        }),
    ],
});

Should you prefer SASS over CSS follow the steps outlined below.

First install SASS by running:

npm install -D sass 

Then edit resources/app.js and copy+paste the following code:

 

import './bootstrap';

import '@fortawesome/fontawesome-free/scss/fontawesome.scss';
import '@fortawesome/fontawesome-free/scss/brands.scss';
import '@fortawesome/fontawesome-free/scss/regular.scss';
import '@fortawesome/fontawesome-free/scss/solid.scss';
import '@fortawesome/fontawesome-free/scss/v4-shims.scss';