How to Install FontAwesome Icons on Laravel 10

install fontawesome icons Laravel

Introduction

Hey there, Greetings, dear developers and Laravel enthusiasts! Today, I am thrilled to unveil a simple yet powerful method to elevate your Laravel 10 project’s style while installing FontAwesome icons on Laravel. If you have ever yearned to elevate your UI with awe-inspiring icons, this post is a delightful treat for you! Join me on this journey as I guide you step-by-step through the process of seamlessly install FontAwesome icons into your Laravel 10 project using npm and Vite. So, without further ado, let’s dive in and make your project shine!

Getting Started with FontAwesome

Before we dive into the code, let’s have a quick introduction to FontAwesome. It’s an iconic font and CSS toolkit that provides a vast collection of beautiful, scalable icons for web development. With FontAwesome, you can effortlessly add eye-catching icons to your Laravel 10 project and enhance the overall user experience.

To install FontAwesome icons in Laravel 10, we’ll be using npm, the Node package manager. Before proceeding, ensure that you have Node.js and npm installed on your system. With everything set up, let’s get ready to bring some awesomeness to your project!

Installing FontAwesome Icons in Laravel with npm

The first step is to open your Laravel 10 project directory in the terminal. Now, run the following npm command to install FontAwesome:

npm install @fortawesome/fontawesome-free

This simple npm command installs the latest version of FontAwesome’s free package into your Laravel project. Also, it adds the necessary dependencies to your `node_modules` directory, ready to be used in your project.

Updating `/resources/sass/app.scss`

To ensure proper integration of FontAwesome icons, we need to update the `app.scss` file in the `/resources/sass/` directory. This step will allow us to include the FontAwesome CSS into our project’s main CSS file. Then, open the `app.scss` file located in the `/resources/sass/` directory and add.

@import "/node_modules/@fortawesome/fontawesome-free/css/all.min.css"

Adding Icons to Your Laravel Views

Now comes the fun part! With FontAwesome successfully included in your project, you can start using the icons throughout your views. It’s as easy as adding an icon element with the desired icon class.

<head>
    @vite(['resources/sass/app.scss'])
</head>

<body>
    <!-- Example Usage -->
    <h1>How to use Font Awesome Icons</h1>
    <i class="fas fa-heart"></i> <!-- A heart icon -->
    <i class="fab fa-twitter"></i> <!-- A Twitter icon -->
</body>

</html>

In this example, we’ve added two icons: a heart and a Twitter bird. The classes `fas` and `fab` represent the FontAwesome solid and brand icon styles, respectively. For a complete list of available icons, you can explore the FontAwesome website.

Styling and Customising FontAwesome Icons

FontAwesome icons are not just limited to their default styles. You can easily customize their size, color, and more using CSS classes.

<i class="fas fa-star" style="font-size: 24px;"></i>

In this customised icon example, we’ve added the `font-size: 24px;` to increase its size. Feel free to experiment with various CSS classes to match your project’s design.

Installing FontAwesome Icons with CDN

To begin, open your main layout file, typically located at resources/views/layouts/app.blade.php. Within the head section, add the following link tag to include the FontAwesome CSS file from the CDN

<head>
    <!-- Other meta tags and stylesheets -->

    <!-- FontAwesome CSS via CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

The link tag points to the FontAwesome CSS file hosted on the CDN. With this CDN link, FontAwesome’s CSS will load directly into your project, ready to use with its awesome icons.

Conclusion

In conclusion, you have successfully installed FontAwesome icons to your Laravel 10 project while seamlessly integrating them with Vite. By updating the app.scss file, you have ensured that FontAwesome icons blend seamlessly throughout your project, harmonizing style and functionality.

Finally, Unleash your creativity and explore boundless possibilities as you embark on your journey of crafting exceptional projects with the dynamic trio of Laravel, Vite, and FontAwesome! Happy coding!

Install FontAwesome Icons on Laravel
Install FontAwesome Icons on Laravel

Leave a Reply

Your email address will not be published. Required fields are marked *