Install Font Awesome in Laravel Mix with Example

In this tutorial, we will show you how to install awesome font icons in laravel mix. We 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>

Thanks for reading!!!

Originally published by Smit Pipaliya at Techvblogs

#laravel #php