Hello, web developers! In this tutorial, we will cover how to install Font Awesome in Laravel 10. I'll walk you through the process of adding Font Awesome step by step. We'll discuss how to install Font Awesome using npm and Vite in a Laravel 10 application.
If you're looking to add Font Awesome icons using Vite in Laravel, this guide will help you do that. Follow the steps below to install Font Awesome via npm and integrate it with Vite.
I'll show you three different ways to install Font Awesome in your Laravel application. Let's go through each method one by one.
We can directly use the Font Awesome CDN by adding a script tag to the <head> section of your Blade file. This method allows you to quickly include Font Awesome without needing to download or install anything.
Here's a simple example of how to include Font Awesome using the CDN in your Blade file.
resources/views/welcome.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
<style type="text/css">
i{
font-size: 50px !important;
padding: 10px;
}
</style>
</head>
<body>
<div class="main-div">
<main class="container">
<h1> Laravel 10 Install Font Awesome Icons Example - Vidvatek</h1>
<i class="fa fa-home"></i>
<i class="fa fa-user"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-file"></i>
</main>
</div>
</body>
</html>
Now, we'll add font awesome using npm command.
npm install font-awesome --save-dev
resources/sass/app.scss
@import "node_modules/font-awesome/scss/font-awesome.scss";
Next, build npm js and css files using the following command.
npm run dev
resources/views/welcome.blade.php
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="dns-prefetch" href="//fonts.bunny.net">
<link href="https://fonts.bunny.net/css?family=Nunito" rel="stylesheet">
<!-- Scripts -->
@vite(['resources/sass/app.scss', 'resources/js/app.js'])
<style type="text/css">
i{
font-size: 50px !important;
padding: 10px;
}
</style>
</head>
<body>
<div class="app">
<main class="container">
<h1> Laravel 10 Install Font Awesome Icons Example - Vidvatek</h1>
<i class="fa fa-home"></i>
<i class="fa fa-user"></i>
<i class="fa fa-trash"></i>
<i class="fa fa-file"></i>
</main>
</div>
</body>
</html>
You might also like:
- Read Also: How to Create AJAX Pagination in Laravel 10
- Read Also: How to Show Data in Modal using Ajax in Laravel 10
- Read Also: Laravel 10 AJAX CRUD Operations With Popup Modal
- Read Also: Laravel 10 and Vue 3 Razorpay Payment Gateway Integration