installing awesome-font on with npm, wrong output url

[aityahiaidir]

• 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

[ruchernchong]

In your main app.scss or whatever you name it as, add this:

@import "~font-awesome/scss/font-awesome.scss";

[aityahiaidir]

I followed your advice and it's the same thing

[alanondra]

You'll need to tweak the value for mix.config.fileLoaderDirs.fonts because it inserts the vendor directory there. I haven't yet found a cleaner way to change this other than modifying the value directly in your webpack.mix.js file before calling any mix functions. I think the reason it's done this way is so that it doesn't risk overwriting any font packages you may install manually to your fonts directly.

[owalerys]

Add this snippet to webpack.mix.js to insert all font files directly into public/fonts for a Laravel project and ignore the public/fonts/vendor/[vendor]/[font-file] folder structure that Mix creates by default:

mix.webpackConfig({
        module: {
            rules: [
                {
                    test: /\.(woff2?|ttf|eot|svg|otf)$/,
                    loader: 'file-loader',
                    options: {
                        name: path => {
                            return Config.fileLoaderDirs.fonts + '/[name].[ext]?[hash]';
                        },
                        publicPath: Config.resourceRoot
                    }
                }
            ]
        }
})

[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

[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

[attilaantal]

I've been struggling with this too and found my way around. See Font URLs are not respecting the public path when compiling Sass #474

[nwaweru]

@attilaantal saved me some time on this. Thanks!

I improved your solution and added an env variable for easier config:

.env: MIX_RESOURCE_ROOT="/your-folder"

webpack.mix.js: mix.setResourceRoot(process.env.MIX_RESOURCE_ROOT);

Works like a charm!