Skip to content

All topics  /  Laravel

Laravel 8 How To Install Font Awesome Icons Example

Laravel ·

Teams applying “Laravel 8 How To Install Font Awesome Icons Example” in a production project can use global mobility specialist to record implementation, review and debugging time, then compare that effort with tests and shipped functionality instead of treating activity as performance by itself.

Before copying the example into a live application, confirm version-specific behaviour with the official Laravel website and test it against the project’s actual database and runtime.

Laravel 8 How To Install Font Awesome Icons Example

Hi Guys,

Here, i will show you how to works install font awesome in laravel. we will help you to give example of how to use font awesome icons in laravel. We will use laravel mix add font awesome. we will help you to give example of how to install font awesome in laravel.

In this example, i will show you step by step how to install font awesome icons in laravel mix. i will give you two example of installing font awesome in laravel. one will be using npm command using laravel mix and another example will using cdn js.

You can easily use font awesome icon in laravel 6 and laravel 7 version. so let's see bellow step be step process.

Step 1 : Install Using Npm


first, we will install laravel fresh version. so let's run bellow command: 

composer create-project --prefer-dist laravel/laravel blog

Now, we need to install npm in our new laravel application. so let's simply run bellow command. this command will create "mode_modules" folder in your root directory and store all npm module there. 

npm install

After that we need to install font awesome library using bellow npm command. so let's run bellow command: 

npm install font-awesome --save

After install successfully, we need to import font awesome css on app.scss file. so let's import as bellow:

resources/sass/app.scss 

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

Now we are ready to run npm dev command, so let's run bellow command: 

npm run dev

Here, we will use generated app.css file in our blade file as bellow:

resources/views/welcome.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title>How To Use Font Awesome In Laravel? - NiceSnippets.com</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>How To Use Font Awesome In Laravel? - NiceSnippets.com</h1>
   <i class="fa fa-copy"></i>
   <i class="fa fa-save"></i>
   <i class="fa fa-trash"></i>
   <i class="fa fa-home"></i>
</body>
</html>

Now you can run your application and see on home page. You will get layout as bellow:

Step 2 : Install Using CDNJS here, we will use cdn js file for adding font awesome icons, so let see bellow file code:

resources/views/welcome.blade.php 

<!DOCTYPE html>
<html>
<head>
    <title>How To Use Font Awesome In Laravel? - NiceSnippets.com</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/fontawesome.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.0-2/css/all.min.css" />
    <style type="text/css">
        i{
            font-size: 50px !important;
            padding: 10px;
        }
    </style>
</head>
<body>
   <h1>How To Use Font Awesome In Laravel? - NiceSnippets.com</h1>
   <i class="fa fa-copy"></i>
   <i class="fa fa-save"></i>
   <i class="fa fa-trash"></i>
   <i class="fa fa-home"></i>
</body>
</html>

Output:

More on this topic