How to show two different icon in navbar in mobile-CodePudding

I have a navbar and I want to show bars icon when it is collapsed and when it is opened I want to show times. I tried this on css but it didn't help.

So what do you think I should do?

.navbar-toggler .fa-bars {
  display: initial;
}

.navbar-toggler.collapsed>.fa-times {
  display: none;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<nav class="navbar navbar-expand-md navbar-dark">
  <a class="navbar-brand heading-black" href="index.html"><img src="img/logo.png" class="logo" alt="Logo" />CineFi.Network</a>
  <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fas fa-times"></i>
    <i class="fas fa-bars"></i>
  </button>
</nav>

CodePudding user response：

Presuming that click on that button will add the class collapsed to the button, I propose you do it like this:

var button = document.querySelector('.navbar-toggler');

button.onclick = function() {
button.classList.toggle('collapsed');
}

.navbar-toggler .fa-bars {
display: initial;
}

.navbar-toggler .fa-times {
display: none;
}

.navbar-toggler.collapsed .fa-bars {
display: none;
}

.navbar-toggler.collapsed .fa-times {
display: initial;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" integrity="sha512-1ycn6IcaQQ40/MKBW2W4Rhis/DbILU74C1vSrLJxCq57o941Ym01SwNsOMqvEBFlcgUa6xLiPY/NS5R E6ztJQ==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<nav class="navbar navbar-expand-md navbar-dark">
  <a class="navbar-brand heading-black" href="index.html"><img src="img/logo.png" class="logo" alt="Logo" />CineFi.Network</a>
  <button class="navbar-toggler navbar-toggler-right border-0" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <i class="fas fa-times"></i>
    <i class="fas fa-bars"></i>
  </button>
</nav>

.navbar-toggler .fa-bars {
display: initial;
}

.navbar-toggler .fa-times {
display: none;
}

.navbar-toggler.collapsed .fa-bars {
display: none;
}

.navbar-toggler.collapsed .fa-times {
display: initial;
}