Font Awesome Bars Icon (Menu, Hamburger, Sidebar)

To create a responsive menu icon for your website, you can use the Font Awesome Bars Icon. This icon consists of three horizontal bars that represent a menu, and it can be toggled to show or hide the navigation links. In this article, we will show you how to use the version 4 fa fa-bars, version 5 fas fa-bars, and version 6 fa-solid fa-bars classes to display the Font Awesome Bars Icon in different styles and sizes.

Fontawesome Version 4.X

bars

<i class='fa fa-bars'></i>

bars

<i class='fa fa-bars' style='color: white'></i>

bars

<i class='fa fa-bars' style='color: red'></i>

bars

<i class='fa fa-bars' style='color: blue'></i>

bars

<i class='fa fa-bars' style='color: #f3da35'></i>
Try it Yourself


Fontawesome Version 5.X

bars

<i class='fas fa-bars'></i>

bars

<i class='fas fa-bars' style='color: white'></i>

bars

<i class='fas fa-bars' style='color: red'></i>

bars

<i class='fas fa-bars' style='color: blue'></i>

bars

<i class='fas fa-bars' style='color: #f3da35'></i>
Try it Yourself

Fontawesome Version 6.X

bars

Web

<i class='fa-solid fa-bars'></i>

React

<FontAwesomeIcon icon="fa-solid fa-bars" />

Vue

<font-awesome-icon icon="fa-solid fa-bars" />

bars

Web

<i class='fa-solid fa-bars' style='color: white'></i>

React

<FontAwesomeIcon icon="fa-solid fa-bars" style={{color: 'white'}} />

Vue

<font-awesome-icon icon="fa-solid fa-bars" :style="{color: 'white'}" />

bars

Web

<i class='fa-solid fa-bars' style='color: red'></i>

React

<FontAwesomeIcon icon="fa-solid fa-bars" style={{color: 'red'}} />

Vue

<font-awesome-icon icon="fa-solid fa-bars" :style="{color: 'red'}" />

bars

Web

<i class='fa-solid fa-bars' style='color: blue'></i>

React

<FontAwesomeIcon icon="fa-solid fa-bars" style={{color: 'blue'}} />

Vue

<font-awesome-icon icon="fa-solid fa-bars" :style="{color: 'blue'}" />

bars

Web

<i class='fa-solid fa-bars' style='color: #f3da35'></i>

React

<FontAwesomeIcon icon="fa-solid fa-bars" style={{color: '#f3da35'}} />

Vue

<font-awesome-icon icon="fa-solid fa-bars" :style="{color: '#f3da35'}" />
Try it Yourself

How to Add font awesome Navigation Icon to Website?

Font Awesome Icon fa fa bars Icon can be added to any web page simply as below. You can integrate Icon in web pages by just adding following below syntax & icon code.

Icon -
<i class='fa fa-bars'></i>
Icon Code -
fa fa-bars

HTML Code

Get complete html code for icon bars

                    
                    <!DOCTYPE html>
                    <html>
                        <head>
                        <title>Page Title</title>
                        <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>
                       </head>
                        <body>
                        <i class='fa fa-bars'></i>
                        </body>
                    </html>                    

Tags

titlebar, PopupMenu, menu bar, submenu, sub-menu, scrollbar, taskbar, pulldown, Pull down Menu, Menu Panel,fa menu icon,nav-icon,hamburger ,three line icon,navigation,sidebar,Text,Justify,Aligment,List

Change Font Awesome Icon Bars Color

Sometimes we need icons in different color, as we suggested by adding css style we can change color. Here we have created one example to change color of icons with css classes.


    <style>
    .blue-color {
        color:blue;
    }
     
    .green-color {
        color:green;
    }
     
    .teal-color {
        color:teal;
    }
     
    .yellow-color {
    color:yellow;
    }
    
    .red-color {
        color:red;
    }
   </style>
    
     <i class='fa fa-bars blue-color'></i>
      <i class='fa fa-bars green-color'></i>
      <i class='fa fa-bars teal-color'></i>
      <i class='fa fa-bars yellow-color'></i>
      <i class='fa fa-bars red-color'></i>
      

Output of the above example will be as below-


Note- Make Sure You have included the below Font Awesome file in header-
            
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css'>            
            
Related Icons
 

 

 

Advertisements



Advertisements



Looking For More Icons?