Sidebar with Icons

How TO – Sidebar with Icons

Learn how to create a side navigation menu with icons, using CSS.

This side navigation is of full height (100%) and always shown.

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.

Try it Yourself

<!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;}

.sidebar {
height: 100%;
width: 160px;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: #111;
overflow-x: hidden;
padding-top: 16px;
}

.sidebar a {
padding: 6px 8px 6px 16px;
text-decoration: none;
font-size: 20px;
color: #818181;
display: block;
}

.sidebar a:hover {
color: #f1f1f1;
}

.main {
margin-left: 160px; /* Same as the width of the sidenav */
padding: 0px 10px;
}

@media screen and (max-height: 450px) {
.sidebar {padding-top: 15px;}
.sidebar a {font-size: 18px;}
}
</style>
</head>
<body>

<div>
<a href=”#home”><i></i> Home</a>
<a href=”#services”><i></i> Services</a>
<a href=”#clients”><i></i> Clients</a>
<a href=”#contact”><i></i> Contact</a>
</div>

<div>
<h2>Sidebar with Icons</h2>
<p>This side navigation is of full height (100%) and always shown.</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>

How To Create a Sidebar with Icons

Step 1) Add HTML:

Example

<!– Load an icon library –>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css”>

<!– The sidebar –>
<div class=”sidebar”>
  <a href=”#home”><i class=”fa fa-fw fa-home”></i> Home</a>
  <a href=”#services”><i class=”fa fa-fw fa-wrench”></i> Services</a>
  <a href=”#clients”><i class=”fa fa-fw fa-user”></i> Clients</a>
  <a href=”#contact”><i class=”fa fa-fw fa-envelope”></i> Contact</a>
</div>

Step 2) Add CSS: