Font-awesome won't install - Laravel 6 & Mix

Question

I'm coming to the point where I'm pushing my app to production but not currently there yet (all the following screenshots are from my local machine), however when trying to install fontawesome I'm running into issues.

I've tried everything I can find on stackoverflow and on here, but I just get square icons. It doesn't seem to be pulling the icons in.

Image of App

APP.SCSS:

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

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

// Variables
@import 'variables';

// Custom
@import 'custom';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

// Select 2 dropdown
@import '~select2/dist/css/select2.css';

// ChartJS
//@import '~chart.js/dist/Chart.min.css';

//Datatables
@import '~datatables.net-bs4/css/dataTables.bootstrap4.css';

I also tried copying over the fonts into a webfonts folder, hence why I have duplicates in my following structure:

Image of App

Still no luck. I've also tried adding the following to my app.scss file:

$fa-font-path: "./webfonts";

Also, I spotted this in the compiled app.css

Image of App

object Module?

What am I missing here? I've tried creating a new project and font-awesome works first time. I've checked the webpack.mix and its all pretty standard. No extra config used:

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

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css');

/*mix.copy('node_modules/@fortawesome/fontawesome-free/', 'public/webfonts')*/

mix.copy(
    'resources/js/custom/*.js',
    'public/js/custom/');

EDIT - here's my node_modules:

Image of App

Your screenshot of your `node_modules` indicates that there is no `scss` folder within `fontawesome-free`. Also there are no `.scss` files at all present like you link within your `APP.SCSS`. Take a look at the official package manager documentation from Font Awesome https://fontawesome.com/how-to-use/on-the-web/setup/using-package-managers — daPhantom, Feb 25 '20 at 08:21
Hi daPhantom. That was a screenshot of the public laravel directory. Here is my node_modules: https://i.imgur.com/c4g5Ids.png — user3274489, Feb 25 '20 at 09:02
Try this: https://stackoverflow.com/questions/59114993/how-to-use-font-awesome-5-icons-in-laravel-6/#answer-59130581 — Karl Hill, Feb 25 '20 at 16:19

Font-awesome won't install - Laravel 6 & Mix

0 Answers0