Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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: 14-Dec-2023
718 Views
Advertisements