Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to create Icon Bar with CSS?
To create Icon Bar with CSS, you need to set the icons using Font Awesome or similar icon libraries. An icon bar provides easy navigation with visual icons. Here, we will create both horizontal and vertical icon bars using Font Awesome icons.
Syntax
.icon-bar {
width: value;
background-color: color;
overflow: auto; /* for horizontal */
}
.icon-bar a {
display: block; /* for vertical */
float: left; /* for horizontal */
text-align: center;
color: color;
font-size: size;
}
Set the CDN for the Icons
To add Font Awesome icons on our web page, include the CDN link in the HTML head section −
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Method 1: Horizontal Icon Bar
To create a horizontal icon bar, set the width to 100% and use float left for proper alignment. The overflow property ensures proper display −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
width: 100%;
background-color: #333;
overflow: auto;
border-radius: 5px;
}
.icon-bar a {
float: left;
width: 25%;
text-align: center;
color: white;
font-size: 24px;
padding: 15px;
text-decoration: none;
transition: background-color 0.3s;
}
.icon-bar a:hover {
background-color: #555;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<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-user"></i></a>
</div>
</body>
</html>
A horizontal navigation bar with four icons (home, search, envelope, user) appears. The home icon has a green active background, and icons change color when hovered.
Method 2: Vertical Icon Bar
To create a vertical icon bar, set a fixed width and use display block for stacking icons vertically −
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
width: 60px;
background-color: #333;
border-radius: 10px;
position: fixed;
top: 50px;
left: 20px;
}
.icon-bar a {
display: block;
text-align: center;
color: white;
font-size: 20px;
padding: 15px;
text-decoration: none;
transition: background-color 0.3s;
}
.icon-bar a:hover {
background-color: #555;
}
.active {
background-color: #4CAF50;
}
</style>
</head>
<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-user"></i></a>
</div>
</body>
</html>
A vertical sidebar with four stacked icons appears on the left side of the page. The home icon has a green active background, and icons highlight on hover.
Key Properties
| Property | Horizontal Bar | Vertical Bar |
|---|---|---|
width |
100% (full width) | Fixed (e.g., 60px) |
display |
Default (inline) | block |
float |
left | Not needed |
overflow |
auto | Not needed |
Conclusion
Icon bars provide intuitive navigation using visual icons. Use horizontal bars for main navigation and vertical bars for sidebars. The key difference is using float for horizontal layout and display block for vertical stacking.
1K+ Views
