Along with CodeIgniter, Zend, and others, Laravel is presently one of the most powerful frameworks. Laravel adheres to the Symphony-based Model-View-Controller design. If you’re acquainted with ASP.NET Core MVC, Laravel is quite similar, but it’s built in PHP.
In this tutorial, we will see how to integrate FontAwesome and laravel 8 + admin lte using npm. Before we start our tutorial, let’s understand some of the terms we will be using in this tutorial.
What is AdminLTE3?
Admin LTE is a free, open-source template for an admin dashboard and control panel built on top of Bootstrap. AdminLTE has been developed over time and is now at version 3.1.0. Its simplicity and fluidity reduce development time when combined with HTML and Bootstrap. Many components are pre-made and ready to use.
What is Font Awesome 5?
Font Awesome is the 2nd most popular icon set that you can use to get scalable vector images and customize them with CSS. It offers more than 1,600 icons in the free set that you can use to find an icon to suit your needs. Font Awesome 5 is available in two editions: a PRO version with 7842 icons and a FREE version with 1588 icons.
How can I use a free copy of Font Awesome 5?
To use the Free Font Awesome 5 icons, either download the Font Awesome library or create an account at Font Awesome and get a code (called KIT CODE) to add Font Awesome to your web page. In this video, we will implement AdminLTE 3 with a fresh Laravel 8 project using the npm command. Also, we will use FontAwesome 5 for icons. No need to do it manually.
Let us start with the integration tutorial:
Step 1: Install fresh Laravel
laravel new laravel-adminlte
cd laravel-adminlte
Step 2: Install laravel ui package
composer require laravel/ui
Step 3: Configure ui assets
php artisan ui vue
Step 4: You have to install npm
npm install
Step 5:
In this step, you have to integrate admin lte in laravel
Install admin-lte 3 in Laravel 8 using: https://adminlte.io/themes/dev/AdminLTE/index3.html
npm install admin-lte
Step 6:
In this step, you have to Install fontawesome
npm install --save @fortawesome/fontawesome-free
Step 7:
Import admin lte and fontawesome css in public/css/app.css using laravel-mixins
Open: resources\sass\app.scss and paste below code
// Fonts
@import url('https://fonts.googleapis.com/css?family=Nunito');
// Font Awesome
@import '~@fortawesome/fontawesome-free/scss/brands';
@import '~@fortawesome/fontawesome-free/scss/regular';
@import '~@fortawesome/fontawesome-free/scss/solid';
@import '~@fortawesome/fontawesome-free/scss/fontawesome';
// Variables
@import 'variables';
// Bootstrap
@import '~bootstrap/scss/bootstrap';
// AdminLTE
@import '~admin-lte/dist/css/adminlte.css';
Step 8: Import admin lte js in public/js/app.js using laravel-mixins
Open : resources\js\bootstrap.js and put below the line
require('admin-lte');
Step 9: Copy admin lte related images from node_mudule directory to public directory
Open webpack.mix and add below line
.copy('node_modules/admin-lte/dist/img', 'public/dist/img');
Now the admin lte 3 and font awesome ready to use with laravel 8
Step 10:
Let’s create a route, open web.php, and paste below code
Route::get('admin', function () { return view('admin'); });
Step 11:
Create a admin.blade.php file and past admin lte index.html code as shown in my video tutorial
Now run the below command and enjoy
npm run dev && npm run watch
Clear the Laravel cache
php artisan optimize
Start laravel serve
php artisan serve
Congratulations! You are all set!
When you first open the Laravel application in your web browser, you’ll see the login and Register buttons in the upper right corner of the screen. After successfully starting the program, you may browse the following URLs and begin experimenting with the UI.
There are other open-source programs accessible online with which you may feel more at ease, including:
- Laravel-Administrative by Jeroennoten
- AdminLTE 3’s official docs
- MultiAuthority Bitfumes
The packages listed above are fantastic and make it simple to integrate AdminLTE with Laravel. It takes just a few minutes to configure them and have your application up and running.
Conclusion
Laravel and AdminLTE 3 are two new frameworks that you need to familiarize yourself with to complete the integration projects. If you are not able to integrate the two, contact us now. We are a popular Laravel web development company with hands-on experience in Laravel.
Leave a Reply