grozavule's avatar

Fontawesome and Vite

I installed the free version of FontAwesome into my project using npm. Can anyone explain to me what steps I need to take now to import and combine the FontAwesome package into my project?

0 likes
3 replies
drehimself's avatar
drehimself
3 years ago
Best Answer
Level 35

You need to import the all.css or all.min.css file into your project.

One way to do that is to import it at the top of the default app.css file:

@import '/node_modules/@fortawesome/fontawesome-free/css/all.min.css';

Then you can just use vite as you normally would. Make sure you have:

@vite(['resources/css/app.css', 'resources/js/app.js'])

in your blade files.

Then you should be able to use the fontawesome icons. Example:

<i class="fa-solid fa-cart-arrow-down"></i>

Reference: https://fontawesome.com/docs/web/setup/host-yourself/webfonts#reference-font-awesome-in-your-project

4 likes
BluKoffee's avatar

@drehimself i followed the steps but i got the error:

[plugin:vite:css] [postcss] ENOENT: no such file or directory, stat 'C:\node_modules@fortawesome\fontawesome-free\css\all.min.css'

Edit: Apparently i made the mistake of installing fontawesome and not fontawesome-free so I installed fontawesome-free with npm and it worked fine :) thank you

Please or to participate in this conversation.