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

See also  PHP Projects Downloads

Comment here