PUBLISHED ON: AUGUST 23, 2021
How to create an icon bar with CSS?
The icon bar is similar to the navigation bar. The only difference is that the links on it are embedded with icons. The icon bars are very popular nowadays and we may find them on most websites. The icon bars allows user to quickly navigate through pages.
In this tutorial, we will learn to create an icon bar with CSS.
Creating an icon bar
The icon bar contains multiple icon links which will navigate you to a particular webpage. So take a <div> element and wrap the <a> element within it. To embed icons on the link, use the external icon library. Here, we are going to use Font Awesome library. Copy the link of font Awesome library and paste it within the head section of HTML code. Use <i> or <span> tag to add the class of related icons to links.
To create a horizontal icon bar, use set the width of the container containing the icon to 100%. Use float: left to place them at the left of the container. Customize the icon by specifying width, color, font-size, etc
Example: Creating a Horizontal icon bar with CSS
In this example, we have created a horizontal bar.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>HTML</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
.container {
float: left;
width: 100%;
background-color: #cccccc;
overflow: auto;
}
.container a {
float: left;
text-align: center;
width: 15%;
padding: 10px;
color: blue;
font-size: 35px;
}
.container a:hover {
color: black;
}
h2 {
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<a href="#"><i class="fa fa-home"></i></a>
<a href="#"><i class="fa fa-envelope"></i></a>
<a href="#"><i class="fa fa-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
<a href="#"><i class="fa fa-cogs"></i></a>
<a href="#"><i class="fa fa-search"></i></a>
</div>
<h2> Horizontal Icon bar </h2>
</body>
</html>
Output
Here is the output of the above code.
Example: Creating a Vertical icon bar with CSS
In this example, we have created a vertical icon bar. To do so, we have added display: block property to <a> element.
Conclusion
In this tutorial, we have learned to create an icon bar with CSS. To add icons, we can use any external icon library. Here, we have created a horizontal and vertical icon bar. It is very simple and easy to create an icon bar with CSS.
