Creating an Icon Bar using HTML and CSS

by

Posted on 13 January 2017

In this tutorial, we will learn how to create a professional looking Icon Bar for your web application/ website using HTML and CSS, for icons we are going to use Font Awesome CDN.

Creating Icon bar using HTML and CSS

So let's get started we will first design our HTML frame for the icon bar, the HTML code is shown below

<!DOCTYPE html>
<html>
<head><title>Icon Bar</title>
<link rel="stylesheet" type="text/css" href="style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css" />
</head>
<body>
    <div class="icon-bar">
        <ul>
            <li class="active"><a href="#"><i class="fa fa-home"></i></a></li>
            <li><a href="#"><i class="fa fa-search"></i></a></li>
            <li><a href="#"><i class="fa fa-envelope"></i></a></li>
            <li><a href="#"><i class="fa fa-globe"></i></a></li>
            <li><a href="#"><i class="fa fa-trash"></i></a></li>
        </ul>
    </div>
</body>
</html>

In the above code, you can change the icons by changing the following line

<li><a href="#"><!-- your icon code --></a></li>

You can choose from multiple icons at the Font awesome library, to get the icon codes visit the following link fontawesome.io/icons/

Now we will design our icon bar using CSS, the CSS code is shown below:

.icon-bar{
    top:0;
    left:0;
    position:fixed;
    height: 100%;
    background: #1c1c1c; /*icon-bar background color*/
}
.icon-bar a{
    text-decoration: none;
    color:#ffffff;
}
.icon-bar ul{
    list-style:none;
    padding:0;
    margin:0;
}
.icon-bar li{
    font-size:36px; /*size of the icons*/
    color: #ffffff; /* color of the icons*/
    padding:20px; 
    transition: 0.2s;
}
.icon-bar li:hover{
    background: #555;
}
.active{background: #FA5858 !important;}

Congratulations you have successfully designed a new Icon Bar for your website/ web application, If you like this article then please share it with your friends.

Thank you for reading

Tweet your queries and feedback to @PsychoCodes or leave a message on our Facebook page. You can also comment your questions below.

Also, don't forget to subscribe to our Newsletter.

If you like this article, then please share it and help us grow.


If You Love this article, You Should Consider:

  • Like us on Facebook
  • Follow us on Instagram
  • Follow us on Twitter
  • Subscribe to our Newsletter.
  • Let us know your suggestions and queries in the comments below.

Thank you for your Love and Support

Share your thoughts

Search
Adverstisement
Adverstisement