Laravel 8 FontAwesome Incorrect Directory - font-awesome

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

You don't have to go so far to get it working, at least I didn't have to.
This was my config laravel mix config file after installing tailwindcss, since tail wind uses postcss. This are steps you take after you install tailwindcss and font-awesome.
mix.js('resources/js/app.js', 'public/js').postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer'),
]);
After adding installing font-awesome, I just added this line
mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require('postcss-import'),
require('tailwindcss'),
require('autoprefixer')
])
.sass('resources/sass/app.scss', 'public/css') // transpiling app.scss
.copy( // copying fonts directory
'node_modules/#fortawesome/fontawesome-free/webfonts',
'public/webfonts'
).sourceMaps();
then I had a sass file in resoures/sass/app.scss with the font-awesome import, since font-awesome is added using sass.
// Fontawesome
#import "~#fortawesome/fontawesome-free/scss/fontawesome";
#import "~#fortawesome/fontawesome-free/scss/regular";
#import "~#fortawesome/fontawesome-free/scss/solid";
#import "~#fortawesome/fontawesome-free/scss/brands"
My app.css file inside resources/css/app.css looks like this
#import 'tailwindcss/base';
#import 'tailwindcss/components';
#import 'tailwindcss/utilities';
after that just run the npm command to compile
npm run dev

Answer 2

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

Answer 3

I am using Laravel Mix in a project without Laravel and I was having this problem with Font Awesome. After several hours of searching, I was able to solve the issue (I think):
webpack.mix.js
let mix = require("laravel-mix");
mix.options({
fileLoaderDirs: {
images: 'dist/images',
fonts: 'dist/fonts'
}
});
mix
.postCss("assets/css/app.css", "dist")
.js("assets/js/app.js", "dist")
.sourceMaps();