How to Install Font Awesome with Laravel Mix

In this tutorial, we will discuss installing font awesome in laravel. If you have a question about using font awesome in laravel, I will give a simple example with a solution. I explained simply about installing font awesome laravel 7. you can see installing font awesome in laravel.

In this example, I will show you how to install awesome font icons in laravel mix. I will give you two examples of installing font awesome in laravel. one will be using the npm command using laravel mix, and another sample will use CDN js.

You can easily use font awesome icon in laravel 6, laravel 7, laravel 8 and laravel 9 versions. So let's see below step by step process.

Example 1 - Install Using Npm

Firstly, the latest version of laravel will be installed. Run the following command:

#! /bin/bash
composer create-project --prefer-dist laravel/laravel font-awesome

Now, we need to install npm in our new laravel application. So let's run the below command. This command will create a "mode_modules" folder in your root directory and store all npm modules.

#! /bin/bash
npm install

After that, we need to install the font-awesome library using the below npm command. Run the following command:

#! /bin/bash
npm install font-awesome --save

After installing successfully, we need to import font awesome CSS on the app.scss file. So let's import as bellow:

`resources/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 a 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,
      },
   }
);

Now everything is installed. So we can run the npm dev command. Run the following command:

#! /bin/bash
npm run dev

In the following code, we are using our generated app.css file in our blade file:

resources/views/welcome.blade.php

<!DOCTYPE html>  
<html>  
<head>  
    <title> Use of font awesome (TechvBlogs)</title>  
    <link type="text/css" rel="stylesheet" href="{{ mix('css/app.css') }}">  
    <style type="text/css">  
        i{  
            font-size: 50px !important;  
            padding: 10px;  
        }  
    </style>  
</head>  
<body>  
    
<h1> Use of font awesome </h1>  
    
<i class="fa fa-home"></i>  
<i class="fa fa-lock"></i>  
<i class="fa fa-users"></i>  
<i class="fa fa-cogs"></i>  
    
</body>  
</html>

Now you can run your application and see it on the home page. You will get the layout below.

Example 2 - Install Using CDNJS

Here, we will use CDN js file for adding font awesome icons, so let's see bellow file code:

resources/views/welcome.blade.php

<!DOCTYPE html>  
<html>  
<head>  
    <title> Use of font awesome (TechvBlogs) </title>  
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/fontawesome.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css" />
    <style type="text/css">  
        i{  
            font-size: 50px !important;  
            padding: 10px;  
        }  
    </style>  
</head>  
<body>  
    
<h1> Use of font awesome </h1>  
    
<i class="fa fa-home"></i>  
<i class="fa fa-lock"></i>  
<i class="fa fa-users"></i>  
<i class="fa fa-cogs"></i>  
    
</body>  
</html>

Thank you for reading this blog.

If you want to manage your VPS / VM Server without touching the command line go and Checkout this link. ServerAvatar allows you to quickly set up WordPress or Custom PHP websites on VPS / VM in a matter of minutes. You can host multiple websites on a single VPS / VM, configure SSL certificates, and monitor the health of your server without ever touching the command line interface.

If you have any queries or doubts about this topic please feel free to contact us. We will try to reach you.