Laravel 5.7 + Font Awesome

Question

I\'m trying to include the Font Awesome toolkit in Laravel 5.7.

These are the steps I took:

1) Run npm install --save-dev @fortawesome/fontawesome-free

Answer 1

If you're using Vue, this worked for me - https://github.com/FortAwesome/vue-fontawesome

Answer 2

Laravel 5.7 through 7.x using Font Awesome 5 (The Right Way)

Build your webpack.mix.js configuration.

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

This dependency entry should now be in your package.json.

// Font Awesome
"dependencies": {
    "@fortawesome/fontawesome-free": "^5.13.0",

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') }}">

Answer 3

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