How to Create a Navbar Menu With Icons | How to Use Font Awesome 5 Icons in HTML | Responsive Navbar

In this tutorial we are going to learn, how to create a Navbar or navigation Menu bar With font awesome Icons and we will also cover How to Use Font Awesome 5 Icons in the HTML Navigation navbar.
Follow these steps to create a navigation menu bar using HTML and CSS:

Key Points

1. Create a new HTML file in your code editor named icon-bar.html

2. To add font awesome icons, Link your HTML file with font awesome website using CDN link
   Website Link: https://fontawesome.com/
   Font Awesome 5 CDN Link: https://fontawesome.com/v5.15/how-to-use/customizing-wordpress/snippets/setup-cdn-webfont

3. Create a container div with a class named navbar.

4. Inside navbar div, create a div with logo class and another div with icon-bar class.

5. Now, search icons of your choice and paste the HTML code of font-awesome 5 icon inside the HTML anchor tag.

6. Add CSS (Cascading stylesheet) to style the navigation menu bar.

7. Add the following CSS flexbox navbar properties to make the navigation bar inline and centered horizontally and vertically.
   

.navbar{
       width: 100%;
       height: 100px;
       display: flex;
       align-items: center;
       background: linear-gradient(to bottom, white, #dddddd);
     }

1. Now, add the following CSS properties for the navbar logo

    .navbar .logo{
        font-size: 20px;
        font-weight: 900px;
        margin: 0 20px;
     }

1. Now, Add the following CSS properties for the font awesome icon styling to make the navigation menu items at the center of the parent div, vertically and horizontally.

     /* styling icon bar */
      .icon-bar{
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center; /* horizontal center */
      }
      /* styling each icon in Icon bar */
      .icon-bar a{
        text-align: center;
        padding: 20px 30px;
        font-size: 25px;
      }
/* Menu items styling */
      .menu-items{
        font-size: large;
        color: black;
        padding-top: 5px;
      }
      /* Mouse hover effects */
      .icon-bar a:hover{
        background-color: rgb(126, 218, 126);
        color: black;
      }

Watch Video Tutorial

If you have any questions regarding the video tutorial feel free to ask in the comment below!

Related category searches:

navigation bar with logo w3schools
icon navigation bar css
css sidebar navigation menu
responsive navigation menu css
icons in html
horizontal menu bar in html
hamburger menu icon css
hamburger menu css responsive

---

• Please have a look at my website for more details! https://hmawebdesign.com
• Place an order for any Web Development work! https://www.fiverr.com/haaddison1?up_rollout=true ---------------------------------------------------------------