Laravel 11 - Blade-Fontawesome
Laravel 11 - Blade-Fontawesome
In this tutorial, we'll explore how to integrate and use the Blade FontAwesome package in Laravel, which simplifies adding scalable icons, enhancing UI design and user experience.
If you're a video person, feel free to skip the post and check out the video instead!
Quick Overview
This guide walks you through the process of integrating Font Awesome icons in a Laravel application using the owenvoke/blade-fontawesome package. We begin by setting up a fresh Laravel project (or using an existing one), then move on to installing the package and configuring it. We also demonstrate how to render icons directly in Blade using component tags and how to customize their appearance using classes and inline styles. Throughout the guide, we cover best practices for managing icons in Laravel and explore the flexibility of the Blade component syntax. By the end of this guide, you’ll be able to easily embed Font Awesome icons in your Laravel views with full control over styling, ensuring a seamless integration with your project's UI design.
Step # 1 : Start a New Laravel Project or Use Your Existing App.
First things first, we either create a new Laravel project or use an existing one. If Laravel is installed globally, you can use.
laravel new fontawesome
Or use Composer like this.
composer create-project laravel/laravel --prefer-dist fontawesome
During the setup, select the following.
- Starter Kit: Select None to skip any preset options and start with a clean slate.
- Testing Framework: Choose Pest for a simple and modern testing experience in Laravel.
- Database: Opt for MySQL as your database management system to work with a relational database.
- Migrations: When prompted, type yes to run the default migrations and set up the basic tables for your project.
This command will create a clean Laravel project named fontawesome. The setup process includes configuring the project to use MySQL as the default database, ensuring you're ready to work with relational data right from the start. Additionally, Pest is chosen as the testing framework, providing a modern and simple approach to writing tests for your application. With these choices, you'll have a solid foundation for building and testing your Laravel application, all set up and ready to go.
Step # 2 : Navigate to Your Project Directory.
Once your Laravel project is ready, open your terminal (e.g., Git Bash) and move into the root directory of your app.
cd c:xampp/htdocs/fontawesome
This ensures you're inside the project folder and ready to proceed.
Step # 3 : Install Blade Font Awesome Package.
To integrate Font Awesome icons easily in Laravel, we use the owenvoke/blade-fontawesome package. It lets us include icons in Blade using simple, clean components like <x-fas-cloud />, rather than writing raw <i> tags. This keeps our Blade views readable and makes it easier to customize icons with Tailwind classes. Run the command below to install the package.
composer require owenvoke/blade-fontawesome
Once installed, this package enables easy use of Font Awesome icons through Blade components without needing to manually include icon classes or scripts.
Step # 4 : Publish the Configuration (Optional).
If you’d like to customize how icons are rendered across your project such as setting default classes, sizing, or tag behavior you can publish the package’s configuration file. This is useful when you want consistent styling for all icons without repeating attributes.
php artisan vendor:publish --tag=blade-fontawesome-config
This command creates the config/blade-fontawesome.php file, allowing you to define global styles, default attributes, and other rendering options for Font Awesome icons.
Step # 5 : Add Blade Icon in Welcome View.
Now that everything is set up, let’s test if the Blade Font Awesome integration works correctly. We’ll update the default Laravel welcome page and include a sample icon using the Blade component syntax. This helps confirm that the icon package is functioning as expected.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Blade Fontawesome - Code Shotcut</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="ml-5">
<h1 class="text-3xl font-bold">Welcome Blade</h1>
<p>Blade - Fontawesome</p>
<x-fas-cloud/>
</div>
</body>
</html>
This will render a cloud icon from the Font Awesome Solid icon set directly in your browser, thanks to the <x-fas-cloud /> Blade component. You can replace this with any other icon name, such as <x-fas-heart /> or <x-fas-user />, to display different icons easily, making it simple to swap out icons as needed without changing the overall structure of your code.
Step # 6 : Run and Verify the Output.
Now let’s run the application and verify that everything is working. Start the Laravel development server using the following command.
php artisan serve
Once the server is running, open your browser and go to: http://127.0.0.1:8000. You should see the welcome page with a Font Awesome cloud icon rendered using the Blade component.
Styling Icons with Tailwind CSS
To customize the appearance of icons, you can apply Tailwind CSS utility classes directly to the Blade icon component. Here’s an example that adds size and color to the cloud icon, allowing you to control the icon's width, height, and color easily without writing custom CSS. This method offers a simple, efficient way to adjust the visual styling of your icons within your Laravel views.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Blade Fontawesome - Code Shotcut</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="ml-5">
<h1 class="text-3xl font-bold">Welcome Blade</h1>
<p>Blade - Fontawesome</p>
<x-fas-cloud class="w-6 h-6 text-gray-500"/>
</div>
</body>
</html>
This renders the icon at 24x24 pixels with a gray color (text-gray-500). You can tweak these classes to fit your layout or design system.
Inline CSS Styles
If you're not using Tailwind or prefer direct styling, you can also use inline styles on the icon component. This gives you full control over color and dimensions.
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Blade Fontawesome - Code Shotcut</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="ml-5">
<h1 class="text-3xl font-bold">Welcome Blade</h1>
<p>Blade - Fontawesome</p>
<x-fas-cloud style="color: lightblue; width: 100px; height: 100px;"/>
</div>
</body>
</html>
This example displays a light blue icon with a size of 100x100 pixels. It’s useful for quick adjustments or when integrating into custom-styled projects.
Conclusion
By following this guide, we've successfully added Font Awesome icon support to a Laravel project using the Blade Font Awesome package. From installation to configuration and rendering icons with custom styles, this approach gives you flexibility and clean integration without touching raw HTML or icon scripts. Whether you're building dashboards, buttons, or interactive UIs, Blade components make it super easy to manage and style your icons. It keeps your views clean and makes icon management more maintainable in the long run.
For more details, customization options, and advanced usage, please refer to the official Blade Font Awesome package documentation.
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