Fontawesome $fa-font-path Error about awps

[Alecaddd]

I did it and it works for me.
These are my steps:

1. Install via npm npm install --save-dev @fortawesome/fontawesome-free
2. Update the webpack.mix.js file to automatically copy the font files into the dist folder

mix.copyDirectory( './node_modules/@fortawesome/fontawesome-free/webfonts', './assets/dist/fonts/font-awesome' );

3. Update the style.scss file of AWPS to set the new font path and import the font-awesome styles:

$fa-font-path: "../fonts/font-awesome" !default;

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

[Celtian]

1. Install
   yarn add @fortawesome/fontawesome-free
2. Import into styles

$fa-font-path: '~@fortawesome/fontawesome-free/webfonts';
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';

[iconicfreelancer]

Thanks Alex, I solved it by updating Webpack.mix.js file to ignore URLs
.options({
processCssUrls: false,
}).version()

[borodin-dev]

I did it and it works for me.
These are my steps:

1. Install via npm npm install --save-dev @fortawesome/fontawesome-free
2. Update the webpack.mix.js file to automatically copy the font files into the dist folder

mix.copyDirectory( './node_modules/@fortawesome/fontawesome-free/webfonts', './assets/dist/fonts/font-awesome' );

1. Update the style.scss file of AWPS to set the new font path and import the font-awesome styles:

$fa-font-path: "../fonts/font-awesome" !default;

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

same, but with gulp:

1. Install via npm npm install --save-dev @fortawesome/fontawesome-free
2. The open your gulpfile.js and paste task:
   gulp.task('icons', function() {
return gulp.src('node_modules/@fortawesome/fontawesome-free/webfonts/*')
.pipe(gulp.dest('app/fonts/font-awesome/'));
});
3. After that go to your main SCSS file and paste that code at the top(or after other imported files in your main SCSS file):
   $fa-font-path: "../fonts/font-awesome" !default;
@import "node_modules/@fortawesome/fontawesome-free/scss/fontawesome";
@import "node_modules/@fortawesome/fontawesome-free/scss/brands";
@import "node_modules/@fortawesome/fontawesome-free/scss/regular";
@import "node_modules/@fortawesome/fontawesome-free/scss/solid";

NOTE: For correct work folders should be named equally. I mean in gulpfile.js path "'app/fonts/font-awesome/'" and in SCSS file the path $fa-font-path: "../fonts/font-awesome"

[Alecaddd]

You changed the path to ../fonts, are you sure all the font files are inside that folder?
The error is telling you that the compiler can't find the fa-brands-400.eot file.

[iconicfreelancer]

Let me explain, what I am doing, so that you could get better idea of the issue.

1. Installed font awesome icons using npm
2. In style.scss I added following code
   `
   $fa-font-path: "../webfonts" !default;

@import "@fortawesome/fontawesome-free/scss/fontawesome";
@import "@fortawesome/fontawesome-free/scss/solid";
@import "@fortawesome/fontawesome-free/scss/brands";
@import "@fortawesome/fontawesome-free/scss/regular";`

3. Web pack copied fonts in my fonts folder

Now if I use the default path of font awesome as per their documentation “../webfonts” in my css file it shows the

src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot

But when I change path to “../fonts” is shows following in css file but with error in my npm run watch command
src: url(/fonts/vendor/@fortawesome/fontawesome-free/webfa-solid-900.eot

When I am using same process without changing path “../webfonts”, it works fine with laravel.

Please guide, where am I going wrong in this.