How to Install Font Awesome with Laravel Mix

Hello Artisan,

In this tutorial, I will show you how to install font awesome and use them in your Laravel react or vue application. I will install it via npm and then we will compile it using Laravel mix. If you don't know how to install font awesome in Laravel then this example is for you.

In this laravel font awesome install and use it in react vue application example, I will use this font-awesome packages. To install font-awesome you first should install it with npm. So in your project root directory type:

npm install font-awesome --save

Then update the following file:

resources/assets/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';

//Font Awesome

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

Now update your webpack.mix.js file like below:

mix.ts("resources/js/app.tsx", "public/js/app.js")
   .sass('resources/sass/app.scss', 'public/css/app.css', {
      sassOptions: {
        quietDeps: true,
      },
   });

Read also: How to Create React Bootstarp Tags Input Example

Now run npm run dev to compile all javascript assets. Now your application is ready to use font-awesome.