navbar mobile icon not appearing - css

Question

I using bootstrap(4) but the navbar for small viewports doesn't show the hamburger icon. I think the issue could be the asset isn't loading properly, but I can see it being fetched in chrome dev tools-> network.
(website is based on this template
https://wrapbootstrap.com/theme/velocity-for-products-bootstrap-4-WB0N38R04)
Navbar html
<header id="header" class="header navbar-fixed-top">
<div class="container">
<h1 class="logo">
<span class="text">Cheaper</span>
</h1><!--//logo-->
<nav class="main-nav navbar navbar-right navbar-inverse navbar-expand-md" role="navigation">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</button><!--//nav-toggle-->
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'how' %}">How it works</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'faq' %}">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About us</a></li>
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">My Profile</a>
</li>
<li class="nav-item nav-item-cta last">
<a class="btn btn-cta btn-cta-secondary" href="{% url 'account_logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">Log In</a></li>
<li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary"
href="{% url 'users:postcode' %}">Sign Up</a></li>
{% endif %}
</ul><!--//nav-->
</div><!--//navbar-collapse-->
</nav><!--//main-nav-->
</div><!--//container-->
</header><!--//header-->
css class for the icon
.navbar-toggler-icon {
background: transparent url('../images/hamburger-icon.svg') no-repeat center center;
}

Answer 1

You could use some thing like this. I have changed button to a link. And did changes in the .navbar-toggler-icon class as well.
.navbar-toggler-icon {
background: url('https://image.flaticon.com/icons/svg/198/198416.svg')no-repeat center center;
display: inline-block;
height: 17px;
width: 50px;
}
<header id="header" class="header navbar-fixed-top">
<div class="container">
<h1 class="logo">
<span class="text">Cheaper</span>
</h1>
<!--//logo-->
<nav class="" role="navigation">
<a href="" class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-collapse">
<span class="navbar-toggler-icon"></span>
</a>
<!--//nav-toggle-->
<div id="navbar-collapse" class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="active nav-item"><a class="nav-link" href="{% url 'home' %}">Home</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'how' %}">How it works</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'faq' %}">FAQ</a></li>
<li class="nav-item"><a class="nav-link" href="{% url 'about' %}">About us</a></li>
{% if request.user.is_authenticated %}
<li class="nav-item">
<a class="nav-link" href="{% url 'users:detail' request.user.username %}">My Profile</a>
</li>
<li class="nav-item nav-item-cta last">
<a class="btn btn-cta btn-cta-secondary" href="{% url 'account_logout' %}">Log out</a>
</li>
{% else %}
<li class="nav-item"><a class="nav-link" href="{% url 'account_login' %}">Log In</a></li>
<li class="nav-item nav-item-cta last"><a class="btn btn-cta btn-cta-secondary" href="{% url 'users:postcode' %}">Sign Up</a></li>
{% endif %}
</ul>
<!--//nav-->
</div>
<!--//navbar-collapse-->
</nav>
<!--//main-nav-->
</div>
<!--//container-->
</header>
<!--//header-->