How to create icon bars with CSS.
An icon bar is a horizontal or vertical row of clickable icons that can be
used to navigate a website or perform certain actions. In this blog post, I
will show you how to create a simple icon bar using HTML and CSS.
First, we need to create a HTML file that contains the icons we want to
use. You can use any icons you like, but for this example, I will use some
icons from Font Awesome, a free and popular icon library. To use Font
Awesome, we need to add a link to their CDN in the head section of our HTML
file:
<head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"></head>
Next, we need to create a div element with a class name of "icon-bar" that
will contain our icons. Inside the div, we will add one anchor element for
each icon, with a class name of "icon" and an href attribute that links to
the destination or action we want to trigger when the icon is clicked. We
will also add a span element inside each anchor, with a class name that
matches the name of the icon we want to use from Font Awesome. For example,
if we want to use the home icon, we will add a span with a class name of
"fas fa-home". Here is the HTML code for our icon bar:
<div class="icon-bar"> <a href="#" class="icon"><span class="fas fa-home"></span></a> <a href="#" class="icon"><span class="fas fa-search"></span></a> <a href="#" class="icon"><span class="fas fa-envelope"></span></a> <a href="#" class="icon"><span class="fas fa-user"></span></a></div>
Now that we have our HTML structure, we need to style it using CSS. We will
use some basic properties to make our icon bar look nice and responsive.
Here is the CSS code for our icon bar:
.icon-bar { display: flex; /* make the div flexible and align the icons horizontally */ justify-content: center; /* center the icons horizontally */ align-items: center; /* center the icons vertically */ background-color: #333; /* set a dark background color for the div */}
.icon { display: block; /* make the anchor elements block-level */ padding: 10px; /* add some space around the icons */ color: white; /* set a white color for the icons */ text-decoration: none; /* remove the underline from the links */}
.icon:hover { background-color: #555; /* change the background color on hover */}
That's it! We have created a simple icon bar using HTML and CSS. You can
customize it further by changing the colors, sizes, or positions of the
icons, or adding more icons as you like. You can also make it vertical by
changing the flex-direction property of the icon-bar class to column. I hope
you enjoyed this tutorial and learned something new.
Rate this article
Getting Info...