font awesome - Laravel 8 FontAwesome Incorrect Directory

Question

I've just tried to add FontAwesome to one of my Laravel 8 projects (using TailwindCSS). I've installed it using

npm install @fortawesome/fontawesome-free

Then added it to ./resources/css/app.css (with my TailwindCSS imports)

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

@import '~@fortawesome/fontawesome-free/css/fontawesome.css';
@import '~@fortawesome/fontawesome-free/css/regular.css';
@import '~@fortawesome/fontawesome-free/css/solid.css';
@import '~@fortawesome/fontawesome-free/css/brands.css';

Then applied the build with

npm run production

However it is giving me a 404 Error regarding the font files. They are correctly sitting inside the ./public/fonts directory but the compiled css file is looking for them in the web servers root directory.

If I manually change the compiled css file to replace

src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?08f9891a6f44d9546678133ab121fc54);

with

src: url(../fonts/vendor/@fortawesome/fontawesome-free/webfa-regular-400.eot?08f9891a6f44d9546678133ab121fc54);

Then it works fine, how can I specify the FontAwesome dir so that I don't have to do this manual edit?

UPDATE

After some digging I found the file ./node_modules/laravel-mix/src/config.js which has the following code

fileLoaderDirs: {
    images: 'images',
    fonts: 'fonts'
},

This seems to be where FontAwesome is getting it's dir from but is there any way to override it?

Answer 1

I wasn't able to get FontAwesome to work with PostCSS but I was able to get it to work with SASS.

I have seen that there are a few different ways to setup SASS with Laravel 8 but I am just posting the method that worked for me in case it can help someone else.

First change css into scss

mv ./resources/css ./resources/sass
mv ./resources/sass/app.css ./resources/sass/app.scss

Then add TailwindCSS and FontAwesome imports to app.scss

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

$fa-font-path: "../webfonts";  // this might be the missing piece that doesn't work without SASS
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/brands";
@import "~@fortawesome/fontawesome-free/scss/regular";

Change webpack.mix.js to the following

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix
    .js('resources/js/app.js', 'public/js')
    .copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts')
    .sass('resources/scss/app.scss', 'public/css')
    .options ({
        processCssUrls: false,
        postCss: [ tailwindcss('./tailwind.config.js') ]
    });

Compile with npm run production