Using Tailwind CSS with Font Awesome Icons: A Deep Dive

Last updated on June 15, 2022 Pennywise Loading... Post a comment

Tailwind CSS is a popular CSS framework that can help you style your website without leaving your HTML code. Font Awesome is one of the most used icon kits ever. Using them together can improve the performance and work experience of web developers. This article will cover the most important aspects you need to know when doing so. Without any further ado, let’s get started.


Font Awesome

The most convenient and quickest way to add Font Awesome to your project is CDN. Insert the following to the <head> section of your page:

<link rel="stylesheet" href="" />

You can also download host Font Awesome locally or install its NPM package. See all the approaches in Font Awesome’s official docs.

Note: You can find the list of all free icons here.

Tailwind CSS

For learning and development purposes, the upcoming examples in this article will use Tailwind CSS from its CDN. Add the script below to the <head> tag of your HTML file:

<script src=""></script>

There are many other ways to integrate Tailwind CSS into your website. You can find them in Tailwind’s official docs.

In the following examples, we’ll use this starter HTML:

<!doctype html>

    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <link rel="stylesheet" href="" />
    <script src=""></script>

   <!-- examples of this article will be here -->


Styling Font Awesome Icons with Tailwind CSS Utility Classes

Size, Color, Opacity, and Rotation

You can control the size and color of an icon by using the text-{size} and text-{color} utility classes, respectively.

You can also set the transparency of an icon using the opacity-{value} utility.

To rotate an icon, use the rotate-{value} utility. For more details, see How to Rotate an Element in Tailwind CSS.

Important note: All classes that start with fa (the two letters that stand for Font Awesome) belong to Font Awesome. Other classes are from Tailwind CSS.


<body class="p-40 space-x-5 bg-amber-100">
    <i class="fa fa-fan text-7xl text-green-500"></i>
    <i class="fa-solid fa-user text-[99px] text-indigo-600 hover:text-amber-400"></i>
    <i class="fa-solid fa-search text-[11rem] text-rose-600 opacity-60 hover:opacity-100"></i>


Adding Icons to Form Elements

The example below shows you how to use Font Awesome icons with form elements like buttons, text inputs, etc.


The code:

<body class="w-screen h-screen flex justify-center items-center bg-indigo-700">
    <form action="" class="bg-white px-10 py-8 rounded-lg drop-shadow-lg space-y-5">
        <h1 class="text-2xl font-light"></h1>

        <div class="pl-2 border border-slate-300 rounded-md">
            <label for="email"><i class="fa-solid fa-envelope text-gray-500"></i></label>
            <input type="text" id="email" name="email" placeholder="email"
                class="px-2 py-2 w-96 border-0 focus:outline-0" />

        <div class="pl-2 border border-slate-300 rounded-md">
            <label for="email"><i class="fa-solid fa-lock text-gray-500"></i></label>
            <input type="password" id="password" name="password" placeholder="password"
                class="px-2 py-2 w-96 border-0 focus:outline-0" />

        <button type="submit" class="px-5 py-2 bg-green-600 hover:bg-green-700 text-white rounded">
            <i class="fa-solid fa-right-to-bracket mr-2"></i>
            Sign In

Animating an Icon

To animate an icon, you have two options:


<body class="p-40 space-x-5 bg-amber-100">
    <i class="fa-solid fa-fan text-[10rem] text-green-500 animate-spin"></i>
    <i class="fa-solid fa-heart fa-beat text-[150px] text-rose-600"></i>


Using Font Awesome Icons in a List

Sample code:

<body class="p-40 space-x-5 bg-amber-100">
    <ul class="fa-ul space-y-2">
            <span class="fa-li"><i class="fa-solid fa-bath text-blue-500"></i></span>
            Do You Want to Learn to Code?
            <span class="fa-li"><i class="fa-solid fa-fire text-orange-500"></i></span>
            Do You Want to Burn Something?
            <span class="fa-li"><i class="fa-solid fa-brush text-green-500"></i></span>
            Welcome to
            <span class="fa-li"><i class="fa-solid fa-heart text-red-500"></i></span>
            Happy Coding!



You’ve learned how to style Font Awesome icons with Tailwind CSS. Using these two libraries helps us to develop projects much faster than without them. If you’d like to gain more experience and explore more new and fascinating things about modern web technologies, take a look at the following articles:

You can also check out our CSS category page for the latest tutorials and examples.

Notify of
Inline Feedbacks
View all comments

Related Articles