LAST UPDATED: AUGUST 5, 2021
How to create a hamburger icon in CSS?
A hamburger icon or menu is a button used for showing the side navigation menu. A hamburger button contains an icon containing three horizontal lines. In this tutorial, we will be learning to create hamburger icons with CSS.
Creating a hamburger icon
To add a hamburger icon, use three <div> tag for three horizontal lines. Set the width and height of <div> and add background-color to it. Use margin for adding space between each horizontal line.
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Example </title>
</head>
<style>
div {
width: 30px;
height: 6px;
background-color: black;
margin-top: 6px;
}
</style>
<body>
<h2> Hamburger icon </h2>
<div></div>
<div></div>
<div></div>
</body>
</html>
Output
Here is the output of the above code.
Example: Adding hamburger icon using Font Awesome library
In this example, we will add a hamburger icon to a button using Font Awesome icon library. For that just add the external CSS link of it and add the icon class name within <i> to the button.
Conclusion
In this tutorial, we have learned to create hamburger icons with CSS. Here, we have used CSS property and external icon library as well to create hamburger icons.
