Programming

How to Create Icon Bar with CSS

create icon bar with css

In this article you will Learn to Create icon bar with CSS

How to Create an Icon Bar with CSS.

There are two types

  • Horizontal icon bar
  • Vertical icon bar

Horizontal icon bar

<html>

<style>

body{ margin:0;}

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

.icon-bar a{ float: left;

width: 25%;

text-align: center;

padding: 13px 0;
transition: all 0.4s ease;
color: gray;
font-size: 36px; }

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

.active {
background-color: #4F50CA;
}

</style>

<body>

<div class=”icon-bar”>

<a class=”active” href=”#”><i class=”fa fa-home”></i></a>

</div>

</body>

</html>

Vertical Icon Bar

<html>

<style>

body {margin:0}

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

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

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

.active {
background-color: #4F50CA;
}

</style>

<body>

<div class=”icon-bar”>

<a class=”active” href=”#”><i class=”fa fa-home”></i></a>

</div>

</body>

</html>

For More topics about the icons visit the Font Awesome icon page

if you want more posts visit our Blog page

Comments (1)

  1. It is an item which I longed for an ample amount of time. Really happy to have gotten the product delivered to my doorstep last night. Sigh, finally I can spend winters as I wanted to!

Comment here