installing awesome-font on with npm, wrong output url

• Laravel Mix Version: 1.5.1
• Node Version 8.7.0
• NPM Version 5.5.1
• OS: Windows 10 64 bits

Description:

Hello,

trying to install the font-awesome with npm and when compiling

1. First the fonts are copied by default to the folder public/fonts/vendor/font-awesome I do not want that, normally they should be copied directly to the folder public/fonts, according to the different tutorials I read folder.

2. Second when compiling with npm run dev command, the output url to my images in my app.css file cannot be resolved, a relative path are wrong.

i get this : src: url("/fonts/vendor/font-awesome/fontawesome-webfont.eot?v=4.7.0");

instead of src: url("../fonts/vendor/font-awesome/fontawesome-webfont.eot?v=4.7.0");

the “…” in prefix are missing, I have to add them manually after compilation, to have a nice display of my fonts

Steps To Reproduce:

installing awesome font with npm

npm install awesome-font --save-dev

importing fonts in my app.scss file

//font awesome
@import "node_modules/font-awesome/scss/font-awesome";

the variable $fa-font-path is setted in _variables.scss of my font-awessome

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

compiling of my css file and JavaScript with the command npm run dev

[denissceluiko]

Maybe a bit neater solution that works for fas 5.1.:

npm install --save-dev @fortawesome/fontawesome-free

sass/app.scss:

// Variables
@import "variables";

// Fonts
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/fa-solid";

Note that variable import is above fas import, that is important.

_sass/variables.scss $fa-font-path: "/fonts"; Add this somewhere.

webpack.mix.js

mix.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/fonts')
   .sass('resources/assets/sass/app.scss', 'public/css');

Here order is also important.

And at last npm run dev

[aityahiaidir]

@artemsky I read the doc of font awesome, but the problem does not come from the installing way, it’s happens also with importing of others library having resources in public path.

I solved the problem by adding mix.setPublicPath('../') to my webpak.mix JS