Create Icon Bar with CSS

To create Icon Bar with CSS, you need to set the icons. Here, we will consider the Font Awesome icon. To include such icons, set the CDN for the icon under the <link>. We will create a horizontal icon bar and a vertical bar.

Set the CDN for the icons

To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the <link> element −

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Horizontal Icon Bar

To create horizontal icon bar, set the width to 100% and the overflow property to auto −

.icon-bar {
   width: 100%;
   background-color: black;
   overflow: auto;
}

Example

Let us see the example to create horizontal icon bar −

<!DOCTYPE html>
<html>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .icon-bar {
         width: 100%;
         background-color: black;
         overflow: auto;
      }
      .icon-bar a {
         float: left;
         width: 30%;
         text-align: center;
         color: white;
         font-size: 30px;
      }
      .active {
         background-color: blue;
      }
   </style>
   <body>
      <div class="icon-bar">
         <a href="#"><i class="fa fa-home"></i></a>
         <a href="#"><i class="fa fa-search"></i></a>
         <a class="active" href="#"><i class="fa fa-bars"></i></a>
      </div>
   </body>
</html>

Vertical Icon Bar

To create vertical icon bar, set the width to 50% −

.icon-bar {
   width: 50px;
   background-color: black;
}

For the <a> i.e., to position the icons in the icon bar correctly, set the display property to the block value −

.icon-bar a {
   display: block;
   text-align: center;
   color: white;
   font-size: 30px;
}

Example

Let us see the example to create vertical icon bar −

<!DOCTYPE html>
<html>
   <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
   <style>
      .icon-bar {
         width: 50px;
         background-color: black;
      }
      .icon-bar a {
         display: block;
         text-align: center;
         color: white;
         font-size: 30px;
      }
      .active {
         background-color: blue;
      }
   </style>
<body>
   <div class="icon-bar">
      <a class="active" href="#"><i class="fa fa-home"></i></a>
      <a href="#"><i class="fa fa-search"></i></a>
      <a href="#"><i class="fa fa-bars"></i></a>
   </div>
</body>
</html>
Updated on: 2023-12-14T17:12:28+05:30

1K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements