ItSolutionStuff.com

How to Use and Install Font Awesome Icons in Laravel?

By Hardik Savani β€’ May 1, 2024
Laravel

Hi Artisan,

In this tute, we will discuss how to install font awesome in laravel. I would like to show you how to add font awesome in laravel. step by step explain how to install font awesome in laravel 10. let’s discuss about laravel install fontawesome npm. follow the below step for laravel install font awesome.

If you want to install font awesome icons using vite in laravel. Then i will help you to explain step by step install font awesome with npm vite. so, let's follow the below step to add font awesome icons in laravel 10 application.

I will give you the following three ways to install font awesome in your laravel application. let's see one by one examples.

Output:

Example 1: Laravel Use Font Awesome using CDN

we can directly use cdn js for font awesome and add script tag on head tag as like the bellow. you can see the simple blade file code. here we don't require to download as well.

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 id="app">

<main class="container">

<h1> How to Install Font Awesome Icon in Laravel? - ItSolutionstuiff.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>

</main>

</div>

</body>

</html>

Example 2: Laravel Vite Install Font Awesome using NPM

Here, we will add font awesome using npm command. so, let's run following command:

npm install font-awesome --save-dev

Next, we need to import font awesome in app.scss. so, let's add following lines on yout app.js file.

resources/sass/app.scss

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

Next, build npm js and css files using following command:

npm run dev

now, we are ready to use font awesome using vite. you can see the simple blade file code.

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 id="app">

<main class="container">

<h1> How to Install Font Awesome Icon in Laravel? - ItSolutionstuiff.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>

</main>

</div>

</body>

</html>

Run Laravel App:

All the required steps have been done, now you have to type the given below command and hit enter to run the Laravel app:

php artisan serve

Now, Go to your web browser, type the given URL and view the app output:

http://localhost:8000/

I hope it can help you...

Tags: Laravel
Hardik Savani

Hardik Savani

I'm a full-stack developer, entrepreneur, and founder of ItSolutionStuff.com. Passionate about PHP, Laravel, JavaScript, and helping developers grow.

πŸ“Ί Subscribe on YouTube

We Are Recommending You

β˜…

How to Install JQuery in Laravel Vite?

Read Now β†’
β˜…

How to Read Content from PDF File in Laravel?

Read Now β†’
β˜…

How to Remove Public from URL in Laravel 10?

Read Now β†’
β˜…

How to Install Bootstrap 5 in Laravel 10?

Read Now β†’
β˜…

Laravel Send an Email on Error Exceptions Tutorial

Read Now β†’
β˜…

How to Get Current Week Records in Laravel?

Read Now β†’
β˜…

Laravel Shopping Add to Cart with Ajax Example

Read Now β†’
β˜…

Laravel Eloquent Sum Multiple Columns Example

Read Now β†’
β˜…

Laravel Send SMS to Mobile with Nexmo Example

Read Now β†’
β˜…

How to Send SMS using Twilio in Laravel?

Read Now β†’
β˜…

Laravel Livewire Change Event Example

Read Now β†’
β˜…

Laravel Carbon Get Tomorrow Date Example

Read Now β†’
β˜…

Laravel Eloquent Delete Record By ID Example

Read Now β†’
β˜…

Laravel Many to Many Eloquent Relationship Tutorial

Read Now β†’