Creating an Icon Bar using HTML and CSS

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 >       <ul>           <li ><a href="#"><i ></i></a></li>           <li><a href="#"><i ></i></a></li>           <li><a href="#"><i ></i></a></li>           <li><a href="#"><i ></i></a></li>           <li><a href="#"><i ></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.


Preorder and Postorder Traversal of binary tree in Python
02 September 2018

Binary Tree in Python
02 September 2018

Image Sharpening by High Pass Filter using Python and OpenCV
17 August 2018

Explaining Register variables in C with examples
17 August 2018

C program to generate all combinations of N-Bit Binary String
10 July 2018

Data Autosave System using PHP, MySQL and AJAX
06 July 2018

Понравилась статья? Поделиться с друзьями:
Добавить комментарий