Hello, I wish to use Font Awesome and only make user download the icons that are used on the site to optimize the performance, but I'm having trouble displaying the icon in my Blade file.
Here's what I have done since installing Laravel 10 with Breeze, Tailwind, and Vue Vite. I'm using Vue only for certain responsive buttons; it's not a Single Page Application (SPA).
First, I installed the required packages using npm:
sail npm install --save @fortawesome/fontawesome-svg-core
sail npm install --save @fortawesome/free-solid-svg-icons
sail npm install --save @fortawesome/vue-fontawesome
/ressources/js/app.js
import './bootstrap';
import { library, dom } from '@fortawesome/fontawesome-svg-core';
import { faGamepad } from '@fortawesome/free-solid-svg-icons';
library.add(faGamepad);
dom.watch();
/*import Alpine from 'alpinejs';
window.Alpine = Alpine;
Alpine.start();*/
tailwind.config.js
import defaultTheme from 'tailwindcss/defaultTheme';
import forms from '@tailwindcss/forms';
/** @type {import('tailwindcss').Config} */
export default {
purge: {
content: [
'./vendor/laravel/framework/src/Illuminate/Pagination/resources/views/*.blade.php',
'./storage/framework/views/*.php',
'./resources/**/*.blade.php',
'./resources/**/*.js',
'./resources/**/*.vue',
],
options: {
safelist: [/^fa-/, /^fas fa-/, /^far fa-/, /^fal fa-/, /^fad fa-/, /^fab fa-/],
},
},
theme: {
extend: {
fontFamily: {
sans: ['Figtree', ...defaultTheme.fontFamily.sans],
},
},
},
plugins: [forms],
};