Laravel

Install Font Awesome Laravel Mix: Easy Setup for Stunning Icons

Learn how to Install Font Awesome Laravel Mix for beautiful, scalable icons in your Laravel projects with simple steps.

Smit Pipaliya

Published:

4 days ago

SSD VPS Servers, Cloud Servers and Cloud Hosting - Vultr.com

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.

Install Font Awesome 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.

Install Font Awesome in Laravel 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.

Laravel Font Awesome Icons