Font awesome doesn't display in my website. I'm also getting these warnings & errors in the console.
Is
GET http://localhost/webfonts/fa-solid-900.woff2 [HTTP/1.1 404 Not Found 1778ms]
GET http://localhost/webfonts/fa-solid-900.woff [HTTP/1.1 404 Not Found 1778ms]
GET http://localhost/webfonts/fa-solid-900.ttf [HTTP/1.1 404 Not Found 1778ms]
downloadable font: download failed (font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:1): status=2147746065 source: http://localhost/webfonts/fa-solid-900.woff2
downloadable font: download failed (font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:2): status=2147746065 source: http://localhost/webfonts/fa-solid-900.woff
downloadable font: download failed (font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:3): status=2147746065 source: http://localhost/webfonts/fa-solid-900.ttf
downloadable font: no supported format found (font-family: "Font Awesome 5 Free" style:normal weight:900 stretch:100 src index:5) source: (end of source list)
Here's my webpack.config.js
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
app.scss
// Fontawesome
@import "~@fortawesome/fontawesome-free/scss/fontawesome";
@import "~@fortawesome/fontawesome-free/scss/solid";
@import "~@fortawesome/fontawesome-free/scss/_fixed-width";
@import "~@fortawesome/fontawesome-free/scss/_larger";
//...
you may try this code
let mix = require('laravel-mix');
mix.js('resources/js/app.js', 'public/js').vue()
.sass('resources/sass/app.scss', 'public/css')
.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts'); // add this line
and compile your assets
npm run dev
.copy('node_modules/@fortawesome/fontawesome-free/webfonts', 'public/webfonts'); // add this line
@tangtang IIRC on lower version that line wasn't needed, why is it needed now on a later version? 🤔
Please or to participate in this conversation.