Installing font-awesome with Laravel 9 (Vite)

Question

i'm using Laravel 9 which doesn't use mix anymore, but vite, to bundle resources, i'm also not using any preprocessors like sass or less and don't really know anything about them.

Every text about adding font awesome on the internet is for Laravel 8 and bellow which didn't use vite. Also they all require me to put the font awesome packs in app.sass file which i don't have and am not sure how exactly to install and use.

I'm a student and am developing the application for an offline presentation, so no CDN's allowed.

Could somebody explain the process of installing font awesome without sass and with vite, or if sass is a must, explain to me in short, what it is, how do i install it, and use it.

Thanks in advance.

Morganite

Answer 1

add fontawesome library

npm install @fortawesome/fontawesome-free

in the file /resources/css/app.css:

@import "@fortawesome/fontawesome-free/css/all.css";

@tailwind base;
@tailwind components;
@tailwind utilities;

then run

npm run build or npm run dev

Jeana

When running sail use: sail npm run dev – Kahl

Answer 2

So i figured it out. Turns out it's as simple as running

npm install @fortawesome/fontawesome-free

and then adding

@import "@fortawesome/fontawesome-free/css/all.css";

to your app.css file. You can then proceed to use

<i class="fa-solid fa-cart-shopping"></i>

and similar in your code.

Morganite

Answer 3

For what it's worth, I'm using FA in Laravel 9 with Vite. In addition to the NPM install, I have the following code in vite.config.cs and resources/sass/app.scss. Works as expected.

vite.config.cs

export default defineConfig({
    //... 
          plugins: [
        laravel([
            'resources/css/app.css',
        ]),
    ],
    resolve: {
        alias: {
            '~fa': path.resolve(__dirname, 'node_modules/@fortawesome/fontawesome-free/scss'),
        }
    },
});

resources/sass/app.scss

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

Goldsmith

Answer 4

Finally find the trick ! Import it to your app.js as the js file of the package has everything !

1 Install the package

npm install @fortawesome/fontawesome-free

2 Import it in resources/js/app.js It is better to import only what you need, to minimize the size.

import '@fortawesome/fontawesome-free/js/fontawesome';
import '@fortawesome/fontawesome-free/js/solid';

3 Enjoy

<i class="fa-solid fa-sort"></i>

You also need to have sass installed. Nothing to change in vite conf.

Fullrigged

I uses karlhillx.medium.com/… tuto, similar to @Fullrigged explanations but with import '@fortawesome/fontawesome-free/js/all';. I am not sure I have sass installed… no resources/sass folder, but it works. – Minimus