How to create a Icon Bar using HTML and CSS in hindi (icon bar कैसे बनाये ?)

by

HTML और CSS के मदद से iconbar बनाना बहुत ही आसान है आइये इसे example से समझने का प्रयास करते है।

Horizontal 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>
  <style>
    .icon-bar {
      width: 100%;
      background-color: #555;
      overflow: auto;
    }

    .icon-bar a {
      float: left;
      width: 20%;
      text-align: center;
      padding: 12px 0;
      transition: all 0.3s ease;
      color: white;
    }

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

    .icon-bar a.active {
      background-color: blue ;
    }

    .icon-bar a i {
      font-size: 24px;
    }
  </style>
</head>
<body>

<div class="icon-bar">
  <a href="#" class="active"><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-trash"></i></a>
</div>

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

</body>
</html>
HTML

Preview

Vartical icon bar कैसे बनाये ?

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0}

.icon-bar {
  width: 90px;
  background-color: #555;
}

.icon-bar a {
  display: block;
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  color: white;
  font-size: 36px;
}

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

.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-envelope"></i></a> 
  <a href="#"><i class="fa fa-globe"></i></a>
  <a href="#"><i class="fa fa-trash"></i></a> 
</div>
  
</body>
</html>
HTML

Leave a comment