In this tutorial you will learn about the Laravel 8 How To Install Font Awesome Icons Example and its application with practical example.
In this article, I’ll show you how to install font awesome in laravel application. In this example we will learn how to use font awesome icons in laravel. We will use laravel mix add font awesome.
Laravel 8 How To Install Font Awesome Icons Example
In this tutorial I’ll give example of how to install font awesome in laravel. In this example, i will guide you step by step how to install font awesome icons in laravel mix. We will use two example of installing font awesome in laravel. one will be using npm command using laravel mix and another example will using cdn js.
Laravel 8 Install Font Awesome Icons using Npm
Step 1:-
First of all we need to create a fresh laravel project, download and install Laravel 8 using the below command
1 |
composer create-project --prefer-dist laravel/laravel lara8blog |
Make sure you have composer installed.
Step 2:-
Now, we need to install npm in our new laravel application.Now, use the following command this will create “mode_modules” folder in your root directory and store all npm module.
1 |
npm install |
Step 3:-
Now, we are ready to install font awesome library using bellow npm command.
1 |
npm install font-awesome --save |
Now we are ready to run npm dev command,
1 |
npm run dev |
Now we are ready to use generated app.css file in our blade file as bellow:
resources/views/welcome.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html> <head> <title>How To Use Font Awesome In Laravel</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</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> |
Laravel 8 Install Font Awesome Icons Using CDN
In this example, we will use cdn js file for adding font awesome icons, so let see bellow file code:
resources/views/welcome.blade.php
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<!DOCTYPE html> <html> <head> <title>How To Use Font Awesome In Laravel</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</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> |