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
Selected Reading
How to create Icon Bar with CSS?
To create Icon Bar with CSS, you need to set the icons. Here, we will consider the Font Awesome icon. To include such icons, set the CDN for the icon under the <link>. We will create a horizontal icon bar and a vertical bar.
Set the CDN for the icons
To add the icons on our web page, we have used the Font Awesome Icons. Include it on a web page using the <link> element −
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Horizontal Icon Bar
To create horizontal icon bar, set the width to 100% and the overflow property to auto −
.icon-bar {
width: 100%;
background-color: black;
overflow: auto;
}
Example
Let us see the example to create horizontal icon bar −
<!DOCTYPE html>
<html>
<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: black;
overflow: auto;
}
.icon-bar a {
float: left;
width: 30%;
text-align: center;
color: white;
font-size: 30px;
}
.active {
background-color: blue;
}
</style>
<body>
<div class="icon-bar">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
<a class="active" href="#"><i class="fa fa-bars"></i></a>
</div>
</body>
</html>
Vertical Icon Bar
To create vertical icon bar, set the width to 50% −
.icon-bar {
width: 50px;
background-color: black;
}
For the <a> i.e., to position the icons in the icon bar correctly, set the display property to the block value −
.icon-bar a {
display: block;
text-align: center;
color: white;
font-size: 30px;
}
Example
Let us see the example to create vertical icon bar −
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.icon-bar {
width: 50px;
background-color: black;
}
.icon-bar a {
display: block;
text-align: center;
color: white;
font-size: 30px;
}
.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-bars"></i></a>
</div>
</body>
</html>
Updated on: 2023-12-14T17:12:28+05:30
1K+ Views
Advertisements