Laravel asset compilation for Laravel 9 + Vite + Font Awesome 6
To use Font Awesome 6 with Laravel 9 and Vite, you will need to follow these steps:
- Install the Font Awesome package:
npm install @fortawesome/fontawesome-free
2. Add the following line to your resources/js/app.js
file to import the Font Awesome icons:
import '@fortawesome/fontawesome-free/js/all';
3. You will need to add a @vite
Blade directive to the <head> of your application’s root template. This will allow you to reference the entry points within the directive.
<!doctype html>
<head>
{{-- ... --}}
@vite(['resources/css/app.css', 'resources/js/app.js'])
</head>
4. In your HTML, you can use the Font Awesome icons like this:
<i class="fas fa-flag"></i>
5. To compile your assets with Laravel Mix, you can run the following command:
npm run dev
6. This will compile your assets and place them in the public
directory. You can also use the watch
command to recompile your assets as you make changes.
npm run watch
7. Finally, run the build command to version and bundle your application's assets, preparing them for deployment to production.
npm run build