I can't see the button icon and i'm using bootstrap. What should I do?

General
1

I don’t know why the button is not showing the icon, It works great but it’s not showing and when I use bg-dark in the button i only see a dark square

<nav class="navbar navbar-expand-lg fixed-top">
  <div class="container-fluid">
    <a href="{% url 'base_law' %}" class="mr-4 block cursor-pointer py-1.5 text-base text-slate-800 font-semibold">
      <img src="{% static 'img/Bausch Health Companies_idnYt_EMOr_0.png' %}" alt="Bausch Health Logo" class="nav-logo">
  </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
      aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon bg-dark"></span>
    </button>
2

You’re facing a common issue with the Bootstrap navbar-toggler icon. The problem is that you’re applying bg-dark to the span.navbar-toggler-icon, which does not render the default hamburger icon, but instead turns the entire span into a dark square — exactly as you’re seeing.

Here’s Why It Happens:

  • Bootstrap’s .navbar-toggler-icon is supposed to show a hamburger icon using a background SVG image via CSS.
  • When you add bg-dark, you’re overriding that background-image with a solid background color, removing the icon.
  • That’s why you’re seeing a dark square instead of the hamburger.

Solution:

  1. Remove the bg-dark class from <span class="navbar-toggler-icon">
  2. If you want to make the icon darker or themed differently, use a custom style or override the background SVG, not bg-dark.

Corrected Code:

<nav class="navbar navbar-expand-lg fixed-top">
  <div class="container-fluid">
    <a href="{% url 'base_law' %}" class="mr-4 block cursor-pointer py-1.5 text-base text-slate-800 font-semibold">
      <img src="{% static 'img/Bausch Health Companies_idnYt_EMOr_0.png' %}" alt="Bausch Health Logo" class="nav-logo">
    </a>
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
      aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
  </div>
</nav>

Optional: Dark Hamburger Icon

If you’re using dark navbar background and want a white icon instead:

Add this CSS override:

.navbar-dark .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba%28255, 255, 255, 1%29' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

Or use Bootstrap’s built-in class:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">

This will:

  • Give your navbar a dark background.
  • Automatically use a white hamburger icon.