Laravel 5.7 + Font Awesome
update your webpack.mix.js configuration as below:
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
mix.setPublicPath('public');
mix.setResourceRoot('../');
type 'npm run dev' in your terminal and hit enter
Laravel 5.7 through 7.x using Font Awesome 5 (The Right Way)
Build your webpack.mix.js configuration.
mix.setResourceRoot('../');
mix.setPublicPath('public')
mix.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css');
Install the latest free version of Font Awesome via a package manager like npm.
npm install @fortawesome/fontawesome-free --save-dev
This dependency entry should now be in your package.json.
// Font Awesome
"devDependencies": {
"@fortawesome/fontawesome-free": "^5.15.3",
In your main SCSS file, /resources/sass/app.scss import one or more styles.
// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/brands';
Compile your assets and produce a minified, production-ready build.
npm run production
Finally, reference your generated CSS file in your Blade template/layout.
<link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">