How to Install Font Awesome with Laravel Mix
Tags: laravel, fontawesome, webdev, tutorial
Published: 2022-07-04 02:41:18


In this tutorial, we will discuss installing  [font awesome](https://fontawesome.com/?ref=techvblogs.com)  in  [laravel](https://laravel.com/?ref=techvblogs.com). 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](https://cdnjs.com/?ref=techvblogs.com).

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:

```bash
#! /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.

```bash
#! /bin/bash
npm install
```

After that, we need to install the font-awesome library using the below  [npm](https://www.npmjs.com/?ref=techvblogs.com)  command. Run the following command:

```bash
#! /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`

```css
// 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:

```javascript
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:

```bash
#! /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`

```html
<!DOCTYPE html>  
<html>  
<head>  
    <title> Use of font awesome </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`

```html
<!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.