Font Awesome provides a wide range of free icons that you can choose from. You can either download and host the Font Awesome files on your server or use the CDN (Content Delivery Network) approach:
<!-- Add this line inside the <head> tag of your HTML file --> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <!-- Navbar structure with icons --> <nav class="navbar"> <a href="#"><i class="fas fa-home"></i> Home</a> <a href="#"><i class="fas fa-search"></i> Search</a> <a href="#"><i class="fas fa-user"></i> Profile</a> </nav>
Step 3: Styling the Navbar
Now that we have the basic structure and icons in place, let’s style the navbar to make it visually appealing. We’ll use CSS to achieve the desired appearance. Add the following CSS code to your HTML file or create a separate CSS file and link it:
<style>
.navbar {
background-color: #333;
color: #fff;
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
}
.navbar a {
color: #fff;
text-decoration: none;
margin-right: 10px;
}
.navbar i {
margin-right: 5px;
}
</style>
Step 4: Adding Interactivity with JavaScript
To make our navbar more interactive, we can add functionality such as a dropdown menu for mobile devices. For this, we’ll utilize JavaScript. Here’s an example of how to implement a responsive navbar using JavaScript:
