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-free2. 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 dev6. 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 watch7. Finally, run the build command to version and bundle your application's assets, preparing them for deployment to production.
npm run build