How to Create an Icon Bar in CSS

Introduction

An icon bar is a horizontal or vertical bar that contains clickable icons, often used for navigation or quick access to social media links. Icon bars improve usability and aesthetics, providing users with easy access to key parts of your website.

In this tutorial, you'll learn how to create a simple and responsive icon bar using HTML and CSS. We’ll style it to work both horizontally and vertically and make it responsive for smaller screens.

Development Steps

Create the HTML Structure: Build the structure for the icon bar using <ul> and <li> elements.
Style the Icon Bar Using CSS: Use CSS to style the icons and make them responsive.
Add Hover Effects: Customize the icon hover effects for better interactivity.
Make the Icon Bar Responsive: Ensure the icon bar adapts to different screen sizes.
Customize Icons with Font Awesome (Optional): Use Font Awesome for customizable icons.

Step 1: Create the HTML Structure

Let’s start by building the basic structure of the icon bar with a list of items.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon Bar</title>
</head>
<body>

    <!-- Step 1: Icon bar HTML structure -->
    <div class="icon-bar">
        <a href="#" class="facebook"><i class="fa fa-facebook"></i></a>
        <a href="#" class="twitter"><i class="fa fa-twitter"></i></a>
        <a href="#" class="instagram"><i class="fa fa-instagram"></i></a>
        <a href="#" class="linkedin"><i class="fa fa-linkedin"></i></a>
        <a href="#" class="youtube"><i class="fa fa-youtube"></i></a>
    </div>

</body>
</html>

Explanation:

The icon-bar contains a series of <a> elements that represent each icon link.
Font Awesome icons (<i class="fa fa-facebook"></i>) are placeholders for now, and you can replace them with real icons.

Step 2: Style the Icon Bar Using CSS

We’ll now style the icon bar and arrange the icons either horizontally or vertically.

/* Step 2: Basic styles for the icon bar */
.icon-bar {
    display: flex;  /* Flexbox layout for horizontal alignment */
    justify-content: center;  /* Center the icons */
    background-color: #333;  /* Dark background for the bar */
    padding: 10px;
}

.icon-bar a {
    text-align: center;
    padding: 15px;
    transition: background-color 0.3s ease;
    color: white;  /* Icon color */
    font-size: 24px;
    text-decoration: none;  /* Remove underline from links */
}

.icon-bar a:hover {
    background-color: #555;  /* Darken the background on hover */
}

Explanation:

.icon-bar { display: flex; }: Flexbox is used to align the icons horizontally.
.icon-bar a { padding: 15px; }: Each icon link has some padding and a white color to make it visible against the dark background.
.icon-bar a:hover: Adds a hover effect that changes the background color of the icons.

Step 3: Add Hover Effects

To improve interactivity, let’s add individual hover colors to each icon for a more engaging user experience.

/* Step 3: Hover effects with individual colors */
.facebook:hover {
    background-color: #3b5998;  /* Facebook blue */
}

.twitter:hover {
    background-color: #00acee;  /* Twitter blue */
}

.instagram:hover {
    background-color: #e4405f;  /* Instagram pink */
}

.linkedin:hover {
    background-color: #0077b5;  /* LinkedIn blue */
}

.youtube:hover {
    background-color: #ff0000;  /* YouTube red */
}

Explanation:

Each social media icon gets a unique hover color representing its brand, improving the visual experience when users interact with the icon.

Step 4: Make the Icon Bar Responsive

We’ll make the icon bar responsive by ensuring it stacks vertically on smaller screens.

/* Step 4: Responsive design for smaller screens */
@media (max-width: 600px) {
    .icon-bar {
        flex-direction: column;  /* Stack the icons vertically */
        position: fixed;  /* Keep the icon bar fixed on the left side */
        left: 0;
        top: 50%;
        transform: translateY(-50%);
        width: 60px;
    }

    .icon-bar a {
        text-align: left;
        padding: 20px;
    }
}

Explanation:

@media (max-width: 600px): On screens smaller than 600px, the icon bar becomes vertical and fixed to the left of the viewport.
position: fixed;: Keeps the icon bar always visible as the user scrolls.
transform: translateY(-50%);: Vertically centers the icon bar on the page.

Step 5: Customize Icons with Font Awesome (Optional)

For more customizable icons, you can integrate Font Awesome into your project. Add the following in the <head> section of your HTML to include Font Awesome:

<!-- Font Awesome CDN for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">

Now you can replace the icon placeholders with actual Font Awesome icons:

<a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
<a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
<a href="#" class="instagram"><i class="fab fa-instagram"></i></a>
<a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
<a href="#" class="youtube"><i class="fab fa-youtube"></i></a>

Explanation:

The Font Awesome icons are prefixed with fab, such as fa-facebook-f, to load the correct social media icons.

Complete Code

Here’s the complete code to create a responsive icon bar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Icon Bar</title>
    <!-- Font Awesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
    <style>
        /* Step 2: Basic styles for the icon bar */
        .icon-bar {
            display: flex;
            justify-content: center;
            background-color: #333;
            padding: 10px;
        }

        .icon-bar a {
            text-align: center;
            padding: 15px;
            transition: background-color 0.3s ease;
            color: white;
            font-size: 24px;
            text-decoration: none;
        }

        .icon-bar a:hover {
            background-color: #555;
        }

        /* Step 3: Hover effects with individual colors */
        .facebook:hover {
            background-color: #3b5998;
        }

        .twitter:hover {
            background-color: #00acee;
        }

        .instagram:hover {
            background-color: #e4405f;
        }

        .linkedin:hover {
            background-color: #0077b5;
        }

        .youtube:hover {
            background-color: #ff0000;
        }

        /* Step 4: Responsive design for smaller screens */
        @media (max-width: 600px) {
            .icon-bar {
                flex-direction: column;
                position: fixed;
                left: 0;
                top: 50%;
                transform: translateY(-50%);
                width: 60px;
            }

            .icon-bar a {
                text-align: left;
                padding: 20px;
            }
        }
    </style>
</head>
<body>

    <!-- Step 1: Icon bar HTML structure -->
    <div class="icon-bar">
        <a href="#" class="facebook"><i class="fab fa-facebook-f"></i></a>
        <a href="#" class="twitter"><i class="fab fa-twitter"></i></a>
        <a href="#" class="instagram"><i class="fab fa-instagram"></i></a>
        <a href="#" class="linkedin"><i class="fab fa-linkedin-in"></i></a>
        <a href="#" class="youtube"><i class="fab fa-youtube"></i></a>
    </div>

</body>
</html>

Output

You can play with the above HTML in Online HTML Editor and Compiler. Here is the output of the above HTML page.:

Conclusion

In this tutorial, you learned how to create a responsive icon bar using CSS and HTML. The icon bar can be used to display social media links or other icons, and it adapts to different screen sizes using Flexbox and media queries. You also learned how to integrate Font Awesome icons for easy customization and a polished design.

Java Guides

Search This Blog