04 October 2023

How to Create a Responsive Navbar Font Awesome Icons

web

Hey there! Have you ever wondered how to add those nifty little icons to your navbar? Well, you’re in luck! Today, we’ll delve into creating a responsive navbar with icons on the left side of each nav item. We’ll be using Font Awesome, a popular icon toolkit. Let’s jump right in!

1. Setting Up Font Awesome

Before we start, you’ll need to include Font Awesome in your project. It’s super simple:

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

Just add the above line inside the <head> tag of your HTML file.

2. HTML Structure

For our navbar, we’ll keep things simple:

<nav>
  <ul>
    <li><i class="fas fa-home"></i> Home</li>
    <li><i class="fas fa-book"></i> Blog</li>
    <li><i class="fas fa-envelope"></i> Contact</li>
    <li><i class="fas fa-info-circle"></i> About</li>
  </ul>
</nav>

Here, we’re using the <i> tag to embed Font Awesome icons. The classes like fas and fa-home determine which icon to display.

Now, let’s make it look pretty with some CSS:

nav {
  background-color: #333;
  padding: 10px 0;
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: space-around;
}

nav li {
  color: white;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s;
}

nav li:hover {
  background-color: #555;
}

nav i {
  margin-right: 8px;
}

The margin-right on the <i> tag ensures there’s space between the icon and the text.

4. Making It Responsive

Our navbar looks great on desktop, but what about mobile devices? Let’s make it responsive:

@media (max-width: 768px) {
  nav ul {
    flex-direction: column;
  }

  nav li {
    padding: 10px;
    text-align: center;
  }
}

With these media queries, our navbar items will stack vertically on smaller screens, making it more touch-friendly.

5. Wrapping Up

That’s it! You’ve successfully created a responsive navbar with icons on the left using Font Awesome. Experiment with different icons and styles to make it uniquely yours.

The combination of Font Awesome and some simple CSS can create a stylish and functional navbar.

Happy coding!