How can I add icons to my Bootstrap 5 navbar?

How can I add icons to my Bootstrap 5 navbar?

You can add icons to your Bootstrap 5 navbar by using icon libraries like Font Awesome or Bootstrap Icons. Just include the library in your HTML and use the appropriate classes.

Can you show me an example of the code?

Sure! Here's a simple example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <i class="fas fa-home"></i> Home
  </a>
  <div class="collapse navbar-collapse">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#"><i class="fas fa-info-circle"></i> About</a>
      </li>
    </ul>
  </div>
</nav>

What if I want to use SVG icons instead?

You can use SVG icons by directly embedding the SVG code in your navbar. Here's an example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-house" viewBox="0 0 16 16">
      <path d="M8 0l8 8-1 1-7-7-7 7-1-1 8-8z"/>
    </svg> Home
  </a>
</nav>