In this article you will Learn to Create icon bar with CSS
Table of Contents
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
