laravel
How to install Font Awesome in laravel
How to install font awesome in laravel; font awesome is most important if you want to add icons to your website because font awesome is providing lots of free icons. I this tutorial we will see how to use font awesome in different ways like installing font awesome or using CDN of font awesome.
We will discus everything step by step to get a perfect result. The font awesome installation is working in laravel 6 or above.
Method 01: Installing Font Awesome
How to install font awesome in laravel
follow the given step to install font awesome
Step 01: Laravel Project Creating
Step 02: npm install
Step 03: Font Awesome install
Step 04: Importing library
Step 05: View File Creating
Step 06: Project testing
Step 01: Laravel Project Creating
We need a fresh laravel project to install font awesome. Run the given command to make a new project
composer create-project laravel/laravel FontAwesomeStep 02: npm install
In next step, we need to install npm in our project. If you installed node.js then run the given command to install npm
npm installif you don’t install node.js then download node.js and install it.
Step 03: Font Awesome install
So next we need to install the font awesome library so run the given command.
npm install font-awesome –saveStep 04: Importing library
In this step just copy the given command and post it into resource/css/app.css
@import "@fortawesome/fontawesome-free/css/all.css";
@tailwind base;
@tailwind components;
@tailwind utilities;
Then run the given command
npm run build or npm run devStep 05: View File Creating
So we need to test our project so create a file and update with given code to check installed font awesome.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to install Font Awesome in laravel</title>
<link rel="stylesheet" href="{{mix('css/app.css')}}">
</head>
<body>
<i class="fa fa-user"></i>
<i class="fa fa-trash"></i>
</body>
</html>Method:02 Using CDN JS
Copy the following code and update your view file.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to install 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" />
</head>
<body>
<i class="fa fa-user"></i>
<i class="fa fa-trash"></i>
</body>
</html>Step 06: Project Testing
Run the given command to test your project
php artisan serve
About author
Muhammad Zubair
My name is Muhammad Zubair. I'm a full-stack developer. I'm a owner of theskillstock.com. I love to write tutorials of PHP, Laravel, Html & css, Javascript, Java and much more with examples.
-Eloquent-Method-in-Laravel.png)
No Comments Yet.