Laravel 13 - Add Font Awesome Icons Using Blade Components.
Laravel 13 - Add Font Awesome Icons Using Blade Components.
In this tutorial, we will learn how to add Font Awesome icons to Laravel 13 using Blade components. You'll install the package, display icons, and customize them with Tailwind CSS and inline styles.
Quick Overview
This guide walks you through the process of integrating Font Awesome icons in a Laravel 13 application using the owenvoke/blade-fontawesome package. From setting up a new Laravel project to installing and enabling the package, you’ll gradually move into using icons directly through Blade components. The tutorial then shows how to place icons inside your views in a clean and modern way, followed by practical examples of styling them with Tailwind CSS and inline styles. By the end, you’ll understand how to manage and customize icons efficiently without extra clutter, keeping your Laravel UI clean, consistent, and easy to work with.
Step # 1 : Set Up a New Laravel 13 Project.
To begin, you’ll need a working Laravel 13 application. You can either start fresh or integrate these steps into an existing project. In this guide, we’ll go with a fresh installation named fontawesome. Before you proceed, ensure that Composer is installed on your system, since Laravel relies on it to manage dependencies. Installing the Laravel Installer globally is recommended, as it makes creating new projects faster and easier. If you don’t already have it installed, run.
composer global require laravel/installer
Once the Installer is ready, you can create a new Laravel 13 project by executing.
laravel new fontawesome
During setup, Laravel will prompt you with a few configuration options. You can choose the following settings for this tutorial.
- Starter Kit: Select None as this keeps the project minimal and clean.
- Testing Framework: Choose Pest for a modern and lightweight testing experience.
- Laravel Boost: Select No as it’s not required for this setup.
- Database: Select SQLite as it’s simple and quick to configure.
- Frontend Assets: Select Yes to automatically install and build assets.
After the installation completes, Laravel will handle the SQLite configuration and compile the frontend assets automatically. At this point, your Laravel 13 project is fully set up and ready for development, with no extra configuration needed.
Step # 2 : Switch to Your Laravel Project Folder.
Once your Laravel application is set up, the next step is to open your terminal (such as Git Bash or Command Prompt) and move into your project’s root directory. Use the cd command to navigate to your project location.
cd c:xampp/htdocs/fontawesome
Once you’re inside this directory, you’re ready to start running commands and setting up everything needed for the project.
Step # 3 : Install the Blade Font Awesome Package.
To use Font Awesome icons in a clean and modern way, we’ll install the owenvoke/blade-fontawesome package. This package allows you to use icons as simple Blade components like <x-fas-house />, instead of writing traditional <i> tag classes. It keeps your codebase cleaner, improves readability, and works perfectly with Tailwind CSS or any modern frontend setup. Run the following command to install the package.
composer require owenvoke/blade-fontawesome
After installation, you can directly use Font Awesome icons inside your Blade views like this <x-fas-house />. No need to manually include icon classes or load additional scripts in your layout files.
Step # 4 : Publish the Configuration.
If you want more control over how icons behave across your application, you can publish the configuration file for the Blade Font Awesome package. This allows you to define global settings such as default classes, icon sizes, and rendering behavior. It’s especially useful when you want to keep icon styling consistent throughout your project without repeating attributes in every component. Run the following command to publish the config file.
php artisan vendor:publish --tag=blade-fontawesome-config
After running this command, a new file will be created at config/blade-fontawesome.php. From here, you can adjust global icon settings and customize how Font Awesome icons are rendered in your Laravel application.
Step # 5 : Display a Font Awesome Icon in the Welcome View.
Now that everything is set up, let’s test the integration by adding a Font Awesome icon to Laravel’s default welcome page. We’ll update the view and display an icon using Blade component syntax inside a simple Tailwind styled layout. Replace the content of your welcome view with the following.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shortcut - Laravel 13 Blade Font Awesome Example</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans antialiased">
<div class="max-w-3xl mx-auto mt-2 p-4 bg-white rounded-2xl shadow-md border border-gray-200">
<h1 class="text-3xl font-bold text-center text-gray-900 mb-2">
Code Shortcut - Welcome to Blade Font Awesome
</h1>
<p class="text-center text-gray-600 mb-2">
This example verifies that Font Awesome is properly installed and working inside a Laravel 13 Blade component setup.
</p>
<!-- Font Awesome house icon with default settings -->
<div class="flex justify-center">
<x-fas-house />
</div>
<p class="text-center text-gray-600 mt-2">
If everything is set up correctly, the house icon should now appear centered with the default styling.
</p>
</div>
</body>
</html>
This renders the house icon from the Font Awesome Solid set using the <x-fas-house /> Blade component. You can easily replace it with other icons such as <x-fas-user /> or <x-fas-heart /> without changing the layout, making icon usage clean, reusable, and consistent across your application.
Step # 6 : Test the Font Awesome Integration.
It's time to start the application and verify that Font Awesome icons are displaying correctly in your Laravel 13 project. Run the following command to start the local development server.
php artisan serve
After the server has started, open your browser and visit URL: http://127.0.0.1:8000. If everything is configured correctly, you should see the welcome page with the Font Awesome house icon rendered using the <x-fas-house /> Blade component.
Customize the Icon with Tailwind CSS
After confirming that the Font Awesome icon is displayed correctly, you can further customize its appearance using Tailwind CSS utility classes. To do this, update your resources/views/welcome.blade.php file with the following code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shortcut - Laravel 13 Blade Font Awesome Example</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans antialiased">
<div class="max-w-3xl mx-auto mt-2 p-4 bg-white rounded-2xl shadow-md border border-gray-200">
<h1 class="text-3xl font-bold text-center text-gray-900 mb-2">
Code Shortcut - Welcome to Blade Font Awesome
</h1>
<p class="text-center text-gray-600 mb-2">
Font Awesome icons can be styled directly using Tailwind utility classes when using Blade components.
</p>
<!-- Font Awesome icon styled using Tailwind CSS -->
<div class="flex justify-center">
<x-fas-house class="w-16 h-16 text-blue-500" />
</div>
<p class="text-center text-gray-600 mt-2">
Tailwind classes are used here to adjust the icon size and color without needing any custom CSS.
</p>
</div>
</body>
</html>
In this example, the house icon is displayed at 64×64 pixels using the w-16 and h-16 utility classes, while the text-blue-500 class changes its color to blue. You can experiment with different Tailwind classes to adjust the icon's size, color, spacing, and other visual properties to match your application's design. Once you have updated the file, refresh your browser to view the changes.
Style the Icon Using Inline CSS
If you prefer not to use Tailwind CSS or want to apply direct styling to the icon component, inline styles are a great alternative. This approach gives you complete control over the icon's color, size, and other visual properties. Below is an example of how to style the image icon using inline CSS.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Code Shortcut - Laravel 13 Blade Font Awesome Example</title>
<!-- Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100 font-sans antialiased">
<div class="max-w-3xl mx-auto mt-2 p-4 bg-white rounded-2xl shadow-md border border-gray-200">
<h1 class="text-3xl font-bold text-center text-gray-900 mb-2">
Code Shortcut - Welcome to Blade Font Awesome
</h1>
<p class="text-center text-gray-600 mb-2">
You can also style Blade Font Awesome components using standard inline CSS when Tailwind is not required.
</p>
<!-- Font Awesome icon styled using inline CSS -->
<div class="flex justify-center">
<x-fas-house style="color: lightblue; width: 200px; height: 200px;" />
</div>
<p class="text-center text-gray-600 mt-2">
Inline styles let you directly control the icon’s appearance, which is useful for quick adjustments or custom design cases.
</p>
</div>
</body>
</html>
In this example, the house icon is displayed with a light blue color and a size of 200×200 pixels using standard CSS properties. You can modify the color, width, height, and other CSS values to achieve the exact appearance you need. After updating the file, refresh your browser to see the updated icon styling in action.
Conclusion
By following this guide, we’ve successfully integrated Font Awesome icons into a Laravel 13 project using the Blade Font Awesome package. Starting from a fresh setup, we installed and configured the package, then explored how to render icons directly in Blade views using simple component syntax. We also looked at different ways to style icons using Tailwind CSS and inline styles, giving you full control over their appearance without relying on traditional <i> tags or external scripts. This approach keeps your templates clean, reusable, and easy to manage while maintaining flexibility for different UI requirements.
For more details, refer to the official docs: https://github.com/owenvoke/blade-fontawesome.
Share this with friends!
To engage in commentary, kindly proceed by logging in or registering
Subscribe to Our Newsletter
Stay ahead of the curve! Join our newsletter to see what everyone’s talking about.
Continue with Google
0 Comments