How to create a Horizontal and Vertical Icon Menu Links Bar with Font Awesome
Icons and Menus
How To, for Web Pages
By: Chrysanthus Date Published: 21 Feb 2025
This tutorial explains how to create an icon menu hyperlinks bar. Clicking each icon takes the user to a new web page or section of a web page, or the clicking causes some other thing to happen. In today’s web designing, the programmer (web designer) does not normally draw the icons. There are libraries out there with already designed icons, some of which are free. This tutorial uses the free library, font-awesome/4.7.0 . Such a library converts an HTML inline element such as an i element or a span element into a specific icon, chosen by the web designer. Different libraries have different names (actually class names) for the same icon.
For this tutorial, there will be five icons for both the horizontal menu bar and the vertical menu bar. The first icon has the Home symbol, for the Home page. The second icon has the magnifying class symbol to bring out the search bar. The third icon has the envelope symbol for the email page (or section of a page). The fourth icon has the globe symbol for a page that deals with the whole world. The fifth icon has the trash can (dust bin) symbol for deleting items.
A webpage can have either the horizontal bar or the vertical bar or both.
The horizontal bar fills the width of its HTML container. The vertical bar has a maximum height.
At the end of this tutorial, is the complete web page code; it is small. The reader can copy and save it; then open it in a browser, to see what the icon bar looks like.
The HTML Page
The basic HTML page for either of the bars is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
</body>
</html>
The first line in the head element must always be there for responsive design. This means that the maximum width (e.g. cellphone width) is the width of the device. The link element brings into the web page, the font-awesome-4.7.0 library from the website, https://cdnjs.cloudflare.com/ . The complete href value must be there. Though the name, font-awesome-4.7.0 has the word "font", it is a library for icons.
The code for the web pages for the horizontal and vertical menu link bars are given at the bottom of this tutorial, so that the reader can display them at the browser in his/her personal computer.
The Icons in its Bar
For this teaching document, there is only one containing element in the HTML body. This is the div element. It is the container for the icons. It is the bar container. The div element and its icons content is as follows:
<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-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
In order to obtain different icons, go to the font-awesome-4.7.0 website and look for the shapes and corresponding names of icons, that you want.
Here, the icon elements are the i elements. The "fa" and "fa. . ." words of the class attributes refer to CSS rule pairs in the imported font-awesome-4.7.0 stylesheet library. These CSS rules in the imported library, convert the i element into a particular icon, according to the exact pair name class value, of the class attribute of the particular i element. The value, "fa fa-home" of the i class attribute, uses the style rules that produce the home icon. The space between "fa" and "fa-home" must be there, for the two main style rules of "fa" and "fa-home". The value, "fa fa-search" of the next i class attribute, uses the corresponding style rules to produce the search (magnifying glass) icon. The value, "fa fa-envelope" of the following i class attribute, uses its corresponding style rules to produce the email icon. The value, "fa fa-globe" of the next i class attribute, uses its corresponding style rules to produce the globe icon. The value, "fa fa-trash" of the following i class attribute, uses the corresponding style rules to produce the trash-can icon.
Note that each icon (i element) is the content of an anchor (a) element for the hyperlink. Since this is a teaching document, if a link is clicked, nothing should happen: that is why the value of each href attribute is just # .
Remember that the anchor element is an inline element, meaning that when they are many (anchor elements), some will wrap to the next line, when not able to fit in the available container width.
The "icon-bar" class is defined in the style element of the current page, by the programmer (website designer) and not in the font-awesome-4.7.0 stylesheet library. Do not confuse between the icon bar (div element) and the anchor elements or the icons themselves (i elements). There is a code segment in the style element, for the icon-bar (div element); see below.
There is another code segment in the style element, for each of the anchor (a) element in the style element, done by the website designer (see below). Do not confuse between the anchor element whose tags nest the icon (i) element.
The website designer does not produce any style code for the icon (i) elements themselves. All the style coding for these i (icon) elements, are from the font-awesome-4.7.0 stylesheet library.
On mouse hover, the background of the anchor (a) element should become black. The website designer has to put that code in the style element (see below).
Also, the background of the anchor element for the active (current) page, has to be greenish. The website designer has to put that code into the style element (see below). The first anchor element is made active in its start tag, by the website designer. See below for a JavaScript and onclick event on how to change to the anchor element that is active.
Difference in CSS Code between Horizontal and Vertical Bars
The difference between the horizontal bar and the vertical bar are in their different style code, in the head element. It is the responsibility of the programmer, to understand and code different styles for the horizontal and vertical menu link bars. The font-awesome-4.7.0 stylesheet library simply brings in the icon styles.
The Horizontal and Vertical Complete Code
Horizontal
The complete code for the HTML horizontal web page is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;}
.icon-bar {
width: 100%;
background-color: #555;
overflow: auto;
}
.icon-bar a {
float: left;
width: 20%;
text-align: center;
padding: 12px 0;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #04AA6D;
}
</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-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
</body>
</html>
Note that there is 0 margin for the body element in the style element code. This enables the left end of the horizontal bar (div element) to align with the left edge of the body element, and the right end of the bar to align with the right edge of the body element.
Save all the above code in a text file, with the name extension, ".html" . Open the file in the browser, to appreciate the horizontal bar.
Vertical
The complete code for the HTML vertical web page is:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0}
.icon-bar {
width: 90px;
background-color: #555;
}
.icon-bar a {
display: block;
text-align: center;
padding: 16px;
transition: all 0.3s ease;
color: white;
font-size: 36px;
}
.icon-bar a:hover {
background-color: #000;
}
.active {
background-color: #04AA6D;
}
</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-globe"></i></a>
<a href="#"><i class="fa fa-trash"></i></a>
</div>
</body>
</html>
Note that there is 0 margin for the body element in the style element code. This enables the left side (edge) of the vertical bar (div element) to align with the left edge of the body element.
Save all the above code in a text file, with the name extension, ".html" . Open the file in the browser, to appreciate the vertical bar.
Code to make the Anchor Element of the Current Page Active
When a hyperlink element (anchor element) is clicked, its background color should change to show that its page has become the current page (or it is active). To achieve this, let each 'a' (anchor) element have an onclick event as follows:
<div class="icon-bar">
<a class="active" href="#" id="0" onclick="fn(id)"><i class="fa fa-home"></i></a>
<a href="#" id="1" onclick="fn(id)"><i class="fa fa-search"></i></a>
<a href="#" id="2" onclick="fn(id)"><i class="fa fa-envelope"></i></a>
<a href="#" id="3" onclick="fn(id)"><i class="fa fa-globe"></i></a>
<a href="#" id="4" onclick="fn(id)"><i class="fa fa-trash"></i></a>
</div>
In the HTML head element, add the following JavaScript:
<script type="text/javascript">
function fn(id) {
const myCollection = document.getElementsByTagName("a");
for (let i = 0; i < myCollection.length; i++) {
myCollection[i].className = "";
}
myCollection[id].className = "active";
}
</script>
Note: after clicking an anchor element (hyperlink) when the web page is opened, move the mouse pointer away from the element to see the change of background color. This is because of the hover effect. This scheme works for both horizontal and vertical menu link bars.
Multi-page Websites
Many simple websites today are single page websites, where what would have been separate web-pages, are now sections in one long page, and each section would fill the screen. The above JavaScript code works fine for such a single page website, to give the hyperlink a special background. For a multi-page website, where for example, Home, Search, Email, Globe, and Trash are separate web-pages, use JavaScript similar to the following:
<script>
if (window.location.href == 'replace with URL for Webpage 3') {
document.getElementById('3').style.backgroundColor = #04AA6D;
document.getElementById('3').style.color = 'white';
}
</script>
where 3 here is the ID for the anchor element (hyperlink) for webpage 3. Read through the code if you have not already done so. This JavaScript code must be in webpage 3. The anchor element (hyperlink) which has to be clicked, to go to webpage 3, from a different webpage, must have id='3'. Webpage 3 must have the same hyperlink (anchor element), and it too must have id='3' .
Conclusion
Today, an icon can be created by skillfully coding HTML and CSS. The font-awesome-4.7.0 stylesheet library has many such icons already created, and it is free to use. To import the library into a webpage, add the following link into the HTML head element:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
Use class attribute in an HTML i element or HTML span element for the icon you want. Put the icon (i or span) element in another HTML element, such as the anchor element, li element, div element, etc. It is the responsibility of the website designer (programmer), to style the containing HTML elements.
Chrys