Create an Icon Bar using HTML and CSS

Last Updated : 29 Nov, 2023

This article provides a complete idea of how to create an Icon Bar using HTML and CSS. HTML is used to design the structure, and CSS applies styles to the elements to make the user interface (UI) attractive.

To add the Icons, we use the Font Awesome icons CDN link in the head section, and add the icons code in body section.

Example 1: Here, we create a Horizontal icon bar.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> 
  
    <title>Icon Bar using HTML and CSS</title> 
  
    <style> 
        .icon-bar { 
            background-color: #4b8b01; 
            overflow: hidden; 
        } 
  
        .icon-bar a { 
            float: left; 
            display: block; 
            color: white; 
            text-align: center; 
            padding: 20px 35px; 
            text-decoration: none; 
            font-size: 30px; 
        } 
  
        .icon-bar a:hover { 
            background-color: #2a93d5; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="icon-bar"> 
        <a href="#"><i class="fa fa-home"></i></a> 
        <a href="#"><i class="fa fa-search"></i></a> 
        <a href="#"><i class="fa fa-envelope"></i></a> 
        <a href="#"><i class="fa fa-globe"></i></a> 
        <a href="#"><i class="fa fa-cog"></i></a> 
          <a href="#"><i class="fa fa-user"></i></a> 
    </div> 
</body> 
  
</html>

Output:

Example 2: Here, we create Vertical Icons Bar.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css"> 
  
    <title>Vertical Icon Bar using HTML and CSS</title> 
  
    <style> 
        .icon-bar { 
            background-color: #4b8b01; 
            overflow: hidden; 
            height: 100vh; 
            width: 80px; 
        } 
  
        .icon-bar a { 
            display: block; 
            color: white; 
            text-align: center; 
            padding: 20px 30px; 
            text-decoration: none; 
            font-size: 30px; 
        } 
  
        .icon-bar a:hover { 
            background-color: #2a93d5; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="icon-bar"> 
        <a href="#"><i class="fas fa-home"></i></a> 
        <a href="#"><i class="fas fa-search"></i></a> 
        <a href="#"><i class="fas fa-envelope"></i></a> 
        <a href="#"><i class="fas fa-globe"></i></a> 
        <a href="#"><i class="fas fa-cog"></i></a> 
        <a href="#"><i class="fas fa-user"></i></a> 
    </div> 
</body> 
  
</html>