Join WhatsApp ChannelJoin Now

Font Awesome Install in Laravel 10 Example

This post was last updated on June 6th, 2023 at 02:57 am

Hi dev,

Today, i show you font awesome install in laravel 10 example. This article will give you simple font awesome install in laravel 10 example. you will font awesome install in laravel 10 example. In this article, we will implement a font awesome install in laravel 10 example.

So, let’s follow few steps to create example of font awesome install in laravel 10 example.

Step 1: Laravel 10 Install

Follow This Command And Install Laravel

composer create-project laravel/laravel example-font

Step 2: Install using Npm

npm install

After that, we need to install the font awesome library using the below npm command

npm install font-awesome --save

resources/sass/app.scss

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

Now we are ready to run the npm dev command

npm run dev

resources/views/welcome.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></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? - NiceSnippets.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>
</body>
</html>
@import "node_modules/font-awesome/scss/font-awesome.scss";

Step 3: Install using CDNJS

routes/web.php

<!DOCTYPE html>
<html>
<head>
    <title></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? - NiceSnippets.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>
</body>
</html>

I hope it will assist you…

Recommended Posts