Top Navigation with Icons Using HTML and CSS Download Source Code

You must have learned how to make navigation menu for a webpage, but in today's modern era, website design has become very advanced. And many types of navigation menus are used to provide a good user-interface to the users. But if you use icons along with the navigation menu, it makes your webpage more interactive to the visitors.

Navigation Menu with Icons using html css

How to add icons in navigation menu?

We should never use images to add icons to a navigation bar. For this we are going to tell you the easiest way here. We will use Font Awesome icons to create the navigation menu with icons. Follow the given steps to add the icon in the navigation menu.

Font Awesome is a library of millions of icons that we can easily use in our web projects. This is the world's most popular way to add icons

1. Add this code between <head> </head> tag.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

2. Paste this code in front of the item of the menu to which you want to add the icon.

<i class="fa fa-fw fa-home"></i> 

3. Add the icon you want to use by copying it from Fonts Awesome website.

Navigation Menu With Icons Using HTML/CSS Source Code

<!DOCTYPE html>
<html>
<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: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        margin: 0;
    }
    
    .navbar {
        width: 100%;
        background-color: #000000;
        overflow: auto;
    }
    
    img {
        width: 250px;
        margin: 5px 0 0 20px;
    }
    
    .navbar a {
        float: right;
        padding: 12px;
        color: white;
        text-decoration: none;
        font-size: 24px;
    }
    
    .navbar a:hover {
        background-color: rgba(175, 169, 169, 0.234);
    }
    
    a.active {
        background-color: #047fc2;
    }
    
    input {
        float: right;
    }
    
    @media screen and (max-width: 500px) {
        .navbar a {
            float: none;
            display: block;
        }
    }
</style>

<body>



    <div class="navbar">

        <img src="image/logo.png" alt="YourLogoHere">

        <a href="#"><i class="fa fa-fw fa-search"></i></a>
        <a href="#"><i class="fa fa-fw fa-user"></i> Login</a>

        <a href="#"><i class="fa fa-fw fa-envelope"></i> Blog</a>
        <a href="#"><i class="fa fa-fw fa-question-circle"></i> About</a>

        <a class="active" href="#"><i class="fa fa-fw fa-home"></i> Home</a>


    </div>


</body>

</html>

Download Code/download/button

How to Use Source Code?

1. Download Following Code

2. Upzip navbar.zip file.

3. Open index.html file & see result.

4. Copy code and open in Code editor and edit according to your need.

Give us a feedback about our content...

Post a Comment

Give us a feedback about our content...

Post a Comment (0)

Previous Post Next Post