I recently added my toggler button (hamburger icon) code on my html however for some reason the hamburger wont show up and looks blank whenver I resize my screen and on smaller viewport. 

Her's my html:

```
<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Friday Hero</a>
    <button class="navbar-toggler navbar-ligh" type="button" data-toggle="collapse" data-target="#main-nav" aria-controls="main-nav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="main-nav">
      <ul class="nav navbar-nav ml-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">ABOUT <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">CONTACT</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">ADVERTISE</a>
        </li>
        <li class="nav-item">
            <a class="nav-link login" href="#">LOGIN</a>
          </li>
      </ul>

    </div>
  </nav>

```

I tried to customize the color css thinking that might be the problem but for some reason the icon still won't show up. Any idea how to solve this?