How to Use Font Awesome Icons In HTML?

Last Updated : 08 Oct, 2024

Icons play an important role in our modern applications. If we use good icons in our website then it can attract the user's attention and also help the user to identify which purpose it is used for.

Prerequisites

Approach To Use Font Awesome Icons

First, you need to add the Font Awesome stylesheet to your HTML file. This can be done by including the following CDN link in the <head> section of your HTML document.
Next, create a container in your HTML where you will display the icons. You can use a <div> or any other appropriate HTML element.
To make your icons visually appealing, you can apply some CSS styles. Below is an example of how to style the icons and their container.
Once you’ve set up the HTML and CSS, open your HTML file in a web browser to see the icons displayed. Ensure that the icons are visible, properly aligned, and styled according to your preferences.

Example: The example code below shows how to use font awesome icons in HTML.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content=
"width=device-width, initial-scale=1.0">
    <title>How to Use Font Awesome Icons</title>
    <link rel="stylesheet" href="style.css">
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>

<body>
    <div class="container">
        <header>
            <h1>Learn How to Use Font Awesome Icons</h1>
        </header>

        <section class="icon-demo">
            <div class="icon-row">
                <div class="icon-card">
                    <i class="fas fa-home"></i>
                    <p>Home</p>
                </div>
                <div class="icon-card">
                    <i class="fas fa-user"></i>
                    <p>User</p>
                </div>
                <div class="icon-card">
                    <i class="fas fa-envelope"></i>
                    <p>Email</p>
                </div>
                <div class="icon-card">
                    <i class="fas fa-cog"></i>
                    <p>Settings</p>
                </div>
                <div class="icon-card">
                    <i class="fab fa-twitter"></i>
                    <p>Twitter</p>
                </div>
            </div>
        </section>

        <footer>
            <p>&copy; 2024 Font Awesome Tutorial | Created by Your Name</p>
        </footer>
    </div>
</body>

</html>

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Poppins', sans-serif;
    background-color: #f5f7fa;
    color: #333;
    padding: 40px;
    line-height: 1.6;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

header {
    margin-bottom: 40px;
}

header h1 {
    font-size: 2.8rem;
    color: #2be459;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 700;
    margin-bottom: 10px;
}

.icon-demo {
    background-color: #ffffff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
    text-align: center;
}

.icon-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 25px;
    justify-items: center;
    margin-top: 30px;
}

.icon-card {
    background-color: #f0f2f5;
    padding: 30px;
    border-radius: 10px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    width: 150px;
}

.icon-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

.icon-card i {
    font-size: 3.5rem;
    transition: color 0.3s ease;
}

.icon-card i.fa-home {
    color: #ff6347;
}

.icon-card i.fa-user {
    color: #4caf50;
}

.icon-card i.fa-envelope {
    color: #007bff;
}

.icon-card i.fa-cog {
    color: #ff9800;
}

.icon-card i.fa-twitter {
    color: #1da1f2;
}

.icon-card p {
    margin-top: 15px;
    font-size: 1.1rem;
    color: #333;
    font-weight: 500;
}

footer {
    background-color: #2c3e50;
    color: #ffffff;
    padding: 20px;
    margin-top: 50px;
    text-align: center;
    border-radius: 10px;
}

footer p {
    font-size: 1rem;
    margin: 0;
}

.icon-card:hover {
    cursor: pointer;
}

@media (max-width: 768px) {
    .icon-demo {
        padding: 30px;
    }

    header h1 {
        font-size: 2.2rem;
    }
}