如何在移动设备的导航栏中显示两个不同的图标

Question

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>

Answer 1

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;
}