How to Create a Sidebar Navigation Menu with Icons, using Font Awesome
Icons and Menus
How To, for Web Applications
By: Chrysanthus Date Published: 21 Feb 2025
This tutorial explains how to create a Sidebar Navigation Menu with Icons, using Font Awesome. font-awesome-4.7.0 stylesheet library is a free library that has to be imported into the webpage. Once imported, it will convert an HTML i element or an HTML span element, into an icon. The particular icon depends on the value of the class attribute in the i or span element. This class attribute value is the name of the particular icon. This class name (attribute value) might consist of one or two or three CSS rules.
In the example (webpage) for this tutorial, the side navigation bar is on the very left of the page and the main document is on the right of the page. The sidebar is narrow and begins from the top of the page to the bottom of the page. If the content (hyperlinks) of the sidebar are too many, a vertical right scroll bar will appear in the sidebar; just as when the content of the main document (main div) is too long, a vertical right scroll bar will appear in the main document section (on the right).
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 navigation sidebar looks like, in relation to the main document.
Each icon in the sidebar is the content of an anchor (a) element. The are 4 'a' elements for the example of this tutorial. All the 'a' elements are in a div element, which is the container for the sidebar (navigation bar). In fact, the sidebar can be seen as this div element.
For the example (webpage) in this tutorial, the i element is used for the icon. The short descriptive name, for the purpose of the icon, is the content of the 'a' element, and not the content of the i element. The i element has an empty content.
The main document is also in a div element, whose content when viewed (displayed), is slightly squeezed to the right.
It is important to note that the left margin of the main document (main div) has to be wide enough to be at least the width of the narrow vertical sidebar (on the left). The sidebar has to occupy the space of the left margin of the main div (main document). In order to avoid positioning conflict, the sidebar has to be placed, by code, in front of the left margin of the main div. So the sidebar div has to be given a z-index of 1, assuming that the main div has a z-index of 0.
The top, right and bottom margins for the main div, have to be as small as possible. They do not need to be large. It is the left margin of the main div that has to be large, so that the sidebar will cover it (from the front).
The HTML Skeleton Code
The HTML skeleton code to be used for this tutorial 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>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
The meta element in the head element is necessary, for any webpage that has to be responsive. In fact, it should be there, for any modern webpage. The link element imports the free font-awesome-4.7.0 stylesheet library. The website for this library is https://cdnjs.cloudflare.com/ . The reader should visit the website for the names (CSS rules) and nature of more icons.
The font-awesome-4.7.0 stylesheet library provides styles (CSS rules) only for its icons. Other styles needed for other elements, such as the 'a' element or the div element, have to be provided for, by the website developer.
Any JavaScript, such as script for which hyperlink ('a' element) is active (is of the current page), has to be done by the website developer.
HTML Body Content
A div element holds the sidebar content. Another div element holds the main content. The HTML body content is as follows:
<div class="sidebar">
<a class="active" href="#home" id='0' onclick="fn(id)"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#services" id='1' onclick="fn(id)"><i class="fa fa-fw fa-wrench"></i> Services</a>
<a href="#clients" id='2' onclick="fn(id)"><i class="fa fa-fw fa-user"></i> Clients</a>
<a href="#contact" id='3' onclick="fn(id)"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>
<div class="main">
<h2>Sidebar with Icons</h2>
<p>Some text, some text, some text, some text, some text, some text, some text.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo.
Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo.
Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
Do not worry about the foreign language above.
The class-name for the sidebar is "sidebar". The class-name for the main div is "main".
Note that each i element is empty.
The icon for the home page or section has the class-name, "fa fa-fw fa-home". "fa" is one CSS rule, "fa-fw" is another CSS rule, "fa-home" is yet another CSS rule; all from the font-awesome-4.7.0 stylesheet library. The developer does not have to code anything in that regard. The icon for the services page or section, has the class-name, "fa fa-fw fa-wrench". The icon for the clients page or section, has the class-name, "fa fa-fw fa-user". The icon for the contact page or section, has the class-name, "fa fa-fw fa-envelope".
The side navigation bar is of full screen height (100%) and it is always shown.
CSS Rules by Web Developer
The font-awesome-4.7.0 stylesheet library provides styles (CSS rules) only for its icons. Other styles needed for other elements, such as the 'a' element or the div element, have to be provided for, by the website developer.
Sidebar CSS Rule
The narrow vertical navigation bar with icons, has to flush to the left and top of the screen. Its height has to be 100% of the screen height. Its width has to be at most, the left margin-width of the main div element. Its position has to be fixed, in relation to the sizes of different screens (when shown on different screens). It has to be in front of the left margin of the main div element; so it has to have a z-index of 1, assuming that the main div for the main information, has a z-index of 0 . The style rule for the side bar is:
div.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
padding-top: 16px;
overflow: auto;
}
When the content of the sidebar becomes too long (downwards), a vertical scroll bar develops, because of the presence of the declaration, "overflow: auto;"; and for the fact that its position is fixed.
Anchor Element CSS Rules
The sidebar consists of anchor elements in a vertical stripe. And so each anchor element must be turned into a block element, so that each takes the whole width of its container (by default). "text-decoration: none" means that the anchor (hyperlink) element must not be underlined, when viewed. The font size for the anchor(a) element is 20px, for this example. The font size determines the size of the icon, as well as any text between the start tag of the anchor element and the end tag of the anchor element. Remember that the icon (i element) is between the start and end tags of the anchor element. It is part of the content of the anchor (hyperlink) element. There are two CSS rules for the anchor element. One of them is:
div.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
}
On hover by the mouse pointer, the text color for the anchor element should change. The CSS rule for this is:
div.sidebar a:hover {
color: #f1f1f1;
}
CSS Rule for the main div
The CSS rule for the main div element is:
div.main {
margin-left: 160px; /* Same as the width of the sidenav */
padding: 0px 10px;
}
Note that its left margin is of the same size as the width of the left sidebar (160px). The top, right and bottom margins are the default, chosen by the browser. For some screens, these top, right and bottom margins may be eliminated completely.
CSS Rule for Active Anchor Element
When the current page or current section of the website is displayed, the background of the corresponding anchor element should be different from those of the other anchor elements. The CSS rule for the first anchor element is:
/* Current/active navbar link */
a.active {
background-color: darkgreen;
}
JavaScript for Active Anchor Element
The above CSS rule gives only the first HTML anchor element, the special background color, for activeness. JavaScript code is necessary, to give the other anchor elements the special background color, when their page (or section) is active (displayed). The script should also deactivate the previous active hyperlink (give it the normal background color). The JavaScript is:
<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>
Read through the code, if you have not already done so.
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, Services, Clients, and Contact 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 = 'darkgreen';
document.getElementById('3').style.color = #818181;
}
</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' .
The Compete HTML (Webpage) Code
And there you have it: The complete HTML Code, with the HTML elements, CSS rules, JavaScript, and the imported free font-awesome-4.7.0 stylesheet library, 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 {font-family: "Lato", sans-serif;}
div.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
padding-top: 16px;
overflow: auto;
}
div.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
}
div.sidebar a:hover {
color: #f1f1f1;
}
div.main {
margin-left: 160px; /* Same as the width of the sidenav */
padding: 0px 10px;
}
/* Current/active navbar link */
a.active {
background-color: darkgreen;
}
</style>
<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>
</head>
<body>
<div class="sidebar">
<a class="active" href="#home" id='0' onclick="fn(id)"><i class="fa fa-fw fa-home"></i> Home</a>
<a href="#services" id='1' onclick="fn(id)"><i class="fa fa-fw fa-wrench"></i> Services</a>
<a href="#clients" id='2' onclick="fn(id)"><i class="fa fa-fw fa-user"></i> Clients</a>
<a href="#contact" id='3' onclick="fn(id)"><i class="fa fa-fw fa-envelope"></i> Contact</a>
</div>
<div class="main">
<h2>Sidebar with Icons</h2>
<p>Some text, some text, some text, some text, some text, some text, some text.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo.
Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
<p>Lorem ipsum dolor sit amet, illum definitiones no quo, maluisset concludaturque et eum, altera fabulas ut quo.
Atqui causae gloriatur ius te, id agam omnis evertitur eum. Affert laboramus repudiandae nec et.
Inciderint efficiantur his ad. Eum no molestiae voluptatibus.</p>
</div>
</body>
</html>
Copy the complete code into a text editor. Save it with the filename extension, .html . Open the file in a browser, and appreciate (and click the different anchor elements) the sidebar navigation menu with icons, in relation to the main content.
Thanks for reading.
Chrys