'How to change/toggle a icon inside a button using bootstrap 5 and jquery?

So I want to change the icon inside my button when it is click so the first icon is <i class="fas fa-bars"></i> and the second icon onclick should be <i class="fas fa-times"></i> So how can I achieve this?
On my button click I want the bootstrap offcanvas opening from the left so I have added offcanvas attributes in my html code
button_div is my main button please ignore rest of CSS
I just want to know how to change/toggle icon inside a button when the button is clicked

body{
    margin: 0;
    padding: 0;
}
@media screen and (min-width: 300px) and (max-width: 500px){
    .hero_image{
        height: 100vh !important;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
        background-position: right !important;
        background-size: cover  !important;
        background-repeat: no-repeat !important;
    }
    .button_div{
        width:50px !important;
        height:50px !important;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 1em;
        display: block !important;
        border: none;
    }
    .nav_tabs{
        margin-top: 2em;
    }
    .hero_name{
        margin-left: auto !important;
    }
    .left_bar{
        width: 80% !important;
        padding-left: 1.5em !important;
        padding-right: 1.5em !important;  
    }
    .socials{
        width: 100%;
        
    }
}
@media screen and (min-width: 500px) and (max-width: 700px){
    .hero_image{
        height: 100vh !important;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
        background-position: right !important;
        background-size: cover  !important;
        background-repeat: no-repeat !important;
    }
    .button_div{
        width:100px;
        height:100px;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 1em;
        display: block !important;
        border: none;
    }
    .nav_tabs{
        margin-top: 2em;
    }
    .hero_name{
        margin-left: 1em !important;
    }
}
@media screen and (min-width: 700px) and (max-width: 900px){
    .hero_image{
        height: 100vh !important;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
        background-position: right !important;
        background-size: cover  !important;
        background-repeat: no-repeat !important;
    }
    .button_div{
        width:100px;
        height:100px;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 1em;
        display: block !important;
        border: none;
    }
    .nav_tabs{
        margin-top: 2em;
    }
    }
}
@media screen and (min-width: 900px) and (max-width: 920px){
    .hero_image{
        height: 100vh !important;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
        background-position: right !important;
        background-size: cover  !important;
        background-repeat: no-repeat !important;
    }
    .button_div{
        width:100px;
        height:100px;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: 1em;
        border: none;
        display: block !important;
    }
    .nav_tabs{
        margin-top: 2em;
    }
}
    /* .fa-times{
        display: none !important;
    }
    .button_div:active .fa-times{
        display: block !important;
    }
    .button_div:focus .fa-times{
        display: block !important;
    }
    .button_div:active .fa-bars{
        display: none !important;
    }
    .button_div:focus .fa-bars{
        display: none !important;
    } */
    .fas .fa-times{
        display: block !important;
    }
    .hero_name{
        display: flex;
        height: 100vh;
        align-items: center;
        margin-left: 3em;
        color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
        font-size: 4em;
    }
    .button_div{
        width:100px;
        height:100px;
        border-radius: 50%;
        background-color: #66ACDC;
        position: absolute;
        right: 0;
        margin-top: 1em;
        margin-right: 1em;
        display: none;
    }
    .left_bar{
        height: 100vh;
        background-color: #030C13;
        margin: 0;
    }
    .hero_image{
        position: relative;
        height: 100vh;
        background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ),url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
        background-position: center;
        background-position: right;
        background-size: cover;
        background-repeat: no-repeat;
    }
    .img-thumbnail{
        border: none !important;

    } 
    .profile_pic {
        width: 150px;
        height: 150px;
        border-radius: 50%;
        margin-top: 3em;
        display: flex;
        justify-content: center;
        box-shadow: -1px 0px 0px 14px #262837
    }
    .name{
        display: flex;
        justify-content: center;
        margin-top: 1em;
        color: #FCFEFF;
    }
    .fb_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .tw_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;

    }
    .lg_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .fa-twitter {
        font-size: 20px;
        left: 16px;
        position: absolute;
        top: 15px;
        color: white;
        cursor: pointer;
    }
    .fa-facebook-f {
        font-size: 20px;
        left: 19px;
        position: absolute;
        top: 15px;
        color: white;
        cursor: pointer;
    }
    .tw_div:hover{
        background-color: #377DB3;
    }
    .tw_div:hover .fa-twitter{
        color:white ;
    }
    .fb_div:hover{
        background-color: #377DB3;
    }
    .fb_div:hover .fa-facebook-f{
        color: white;
    }
    .lg_div:hover{
        background-color: #377DB3;
    }
    .lg_div:hover .fa-instagram{
        color: white;
    }
    .fa-instagram {
        font-size: 24px;
        left: 15px;
        position: absolute;
        top: 12px;
        color: white;
        cursor: pointer;
    }
    .fa-skype{
        font-size: 24px;
        left: 15px;
        position: absolute;
        top: 12px;
        color: white;
        cursor: pointer;
    }
    .fa-linkedin-in{
        font-size: 24px;
        left: 15px;
        position: absolute;
        top: 12px;
        color: white;
        cursor: pointer;
    }
    .sky_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .sky_div:hover{
        background-color:#377DB3 ;
    }
    .sky_div:hover .fa-skype{
        color: white;
    }
    .ld_div{
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #1D212B;
        padding: 1.5em;
        margin-left: 1em;
    }
    .ld_div:hover{
        background-color:#377DB3 ;
    }
    .ld_div:hover .fa-linkedin-in{
        color: white;
    }
    .nav_tabs{
        display: flex;
    }
    .nav-link{
        color: #92959D ;
        margin-bottom: 1em
    }
    .nav-link:hover{
        color: white;
    }
    .fa-home{
        color: #377DB3;
        font-size:1.5em;
    }
    .fa-user{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-link:hover .fa-user{
        color: #377DB3;
    }
    .fa-file{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-link:hover .fa-file{
        color: #377DB3;
    }
    .nav-link:hover .fa-list-alt{
        color: #377DB3;
    }
    .fa-list-alt{
        color:#5F656F ;
        font-size:1.5em;
    }
    .nav-link:hover .fa-server{
        color: #377DB3;
        
    }
    .fa-server{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-link:hover .fa-envelope{
        color: #377DB3;
    }
    .fa-envelope{
        color: #5F656F;
        font-size:1.5em;
    }
    .nav-item a{
        margin-left: 1em;
    }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assignment 8</title>
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script type="text/javascript" src="js/popper.min.js"></script>
    <script type="text/javascript" src="js/bootstrap.min.js"></script>

    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container-fluid">
<button type="button" class="button_div toggleBtn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse">
            <div class="icon_div">
              <span id='myIcon' ><i class="fas fa-bars"></i></span>
          </button>
            </div>
       
            </div>
     </div>
    </div>
</div>
</body>
</html>

I am posting my code snippet below

javascripthtmljquerycssbootstrap-5


Solution 1:[1]

There are 2 way to do that, first you can make 2 css class one simple with font bars and when have class .clicked switch to other content of font awesome wich is times

#myIcon i::before {
    content: "\f0c9";
}
#myIcon.clicked i::before {
    content: "\f00d";
}

Then with javascript toggle class .clicked on $('#myIcon').toggleClass('clicked');

OR just make a var = 0; and toggle between value

let toggleVar = 0; // somewhere outside function on click

if(toggleVar === 0) {
    $('i').removeClass('fa-bars').addClass('fa-times');
    toggleVar = 1;
} else {
    $('i').removeClass('fa-times').addClass('fa-bars');
    toggleVar = 0;
}

Solution 2:[2]

You just need to add a JavaScript function and handle the button onClick

function toggleIcon() {
  const child = document.getElementById('myIcon').childNodes[0];
  if (child.className === 'fas fa-bars')
    child.className = "fas fa-times";
  else
    child.className = "fas fa-bars";
}
body {
  margin: 0;
  padding: 0;
}

@media screen and (min-width: 300px) and (max-width: 500px) {
  .hero_image {
    height: 100vh !important;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
    background-position: right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .button_div {
    width: 50px !important;
    height: 50px !important;
    border-radius: 50%;
    background-color: #66ACDC;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1em;
    display: block !important;
    border: none;
  }
  .nav_tabs {
    margin-top: 2em;
  }
  .hero_name {
    margin-left: auto !important;
  }
  .left_bar {
    width: 80% !important;
    padding-left: 1.5em !important;
    padding-right: 1.5em !important;
  }
  .socials {
    width: 100%;
  }
}

@media screen and (min-width: 500px) and (max-width: 700px) {
  .hero_image {
    height: 100vh !important;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
    background-position: right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .button_div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #66ACDC;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1em;
    display: block !important;
    border: none;
  }
  .nav_tabs {
    margin-top: 2em;
  }
  .hero_name {
    margin-left: 1em !important;
  }
}

@media screen and (min-width: 700px) and (max-width: 900px) {
  .hero_image {
    height: 100vh !important;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
    background-position: right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  .button_div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #66ACDC;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1em;
    display: block !important;
    border: none;
  }
  .nav_tabs {
    margin-top: 2em;
  }
}


}
@media screen and (min-width: 900px) and (max-width: 920px) {
  .hero_image {
    height: 100vh !important;
    background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg') !important;
    background-position: right !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
  }
  
  .button_div {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #66ACDC;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 1em;
    border: none;
    display: block !important;
  }
  
  .nav_tabs {
    margin-top: 2em;
  }
}

/* .fa-times{
        display: none !important;
    }
    .button_div:active .fa-times{
        display: block !important;
    }
    .button_div:focus .fa-times{
        display: block !important;
    }
    .button_div:active .fa-bars{
        display: none !important;
    }
    .button_div:focus .fa-bars{
        display: none !important;
    } */
.fas .fa-times {
  display: block !important;
}
.hero_name {
  display: flex;
  height: 100vh;
  align-items: center;
  margin-left: 3em;
  color: white;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
  font-size: 4em;
}
.button_div {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #66ACDC;
  position: absolute;
  right: 0;
  margin-top: 1em;
  margin-right: 1em;
  display: none;
}
.left_bar {
  height: 100vh;
  background-color: #030C13;
  margin: 0;
}
.hero_image {
  position: relative;
  height: 100vh;
  background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('https://imaging.nikon.com/lineup/dslr/df/img/sample/img_01.jpg');
  background-position: center;
  background-position: right;
  background-size: cover;
  background-repeat: no-repeat;
}
.img-thumbnail {
  border: none !important;
}
.profile_pic {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  margin-top: 3em;
  display: flex;
  justify-content: center;
  box-shadow: -1px 0px 0px 14px #262837
}
.name {
  display: flex;
  justify-content: center;
  margin-top: 1em;
  color: #FCFEFF;
}
.fb_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
  margin-left: 1em;
}
.tw_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
}
.lg_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
  margin-left: 1em;
}
.fa-twitter {
  font-size: 20px;
  left: 16px;
  position: absolute;
  top: 15px;
  color: white;
  cursor: pointer;
}
.fa-facebook-f {
  font-size: 20px;
  left: 19px;
  position: absolute;
  top: 15px;
  color: white;
  cursor: pointer;
}
.tw_div:hover {
  background-color: #377DB3;
}
.tw_div:hover .fa-twitter {
  color: white;
}
.fb_div:hover {
  background-color: #377DB3;
}
.fb_div:hover .fa-facebook-f {
  color: white;
}
.lg_div:hover {
  background-color: #377DB3;
}
.lg_div:hover .fa-instagram {
  color: white;
}
.fa-instagram {
  font-size: 24px;
  left: 15px;
  position: absolute;
  top: 12px;
  color: white;
  cursor: pointer;
}
.fa-skype {
  font-size: 24px;
  left: 15px;
  position: absolute;
  top: 12px;
  color: white;
  cursor: pointer;
}
.fa-linkedin-in {
  font-size: 24px;
  left: 15px;
  position: absolute;
  top: 12px;
  color: white;
  cursor: pointer;
}
.sky_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
  margin-left: 1em;
}
.sky_div:hover {
  background-color: #377DB3;
}
.sky_div:hover .fa-skype {
  color: white;
}
.ld_div {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #1D212B;
  padding: 1.5em;
  margin-left: 1em;
}
.ld_div:hover {
  background-color: #377DB3;
}
.ld_div:hover .fa-linkedin-in {
  color: white;
}
.nav_tabs {
  display: flex;
}
.nav-link {
  color: #92959D;
  margin-bottom: 1em
}
.nav-link:hover {
  color: white;
}
.fa-home {
  color: #377DB3;
  font-size: 1.5em;
}
.fa-user {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-link:hover .fa-user {
  color: #377DB3;
}
.fa-file {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-link:hover .fa-file {
  color: #377DB3;
}
.nav-link:hover .fa-list-alt {
  color: #377DB3;
}
.fa-list-alt {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-link:hover .fa-server {
  color: #377DB3;
}
.fa-server {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-link:hover .fa-envelope {
  color: #377DB3;
}
.fa-envelope {
  color: #5F656F;
  font-size: 1.5em;
}
.nav-item a {
  margin-left: 1em;
}
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Assignment 8</title>
  <link rel="stylesheet" href="css/bootstrap.min.css">
  <script type="text/javascript" src="js/popper.min.js"></script>
  <script type="text/javascript" src="js/bootstrap.min.js"></script>

  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.4/css/all.css" integrity="sha384-DyZ88mC6Up2uqS4h/KRgHuoeGwBcD4Ng9SiP4dIRy0EXTlnuz47vAwmeGwVChigm" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <button onClick="toggleIcon()" type="button" class="button_div toggleBtn" data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse">
            <div class="icon_div">
              <span id='myIcon' ><i class="fas fa-bars"></i></span>
          </button>
  </div>

  </div>
  </div>
  </div>
  </div>
</body>

</html>

Solution 3:[3]

It is very simple, becouse you have jQuery tag, I used it for example like this:

Code below define the element you want to click

$( ".toggleBtn" )

after that you need to define event listener on selected element like this :

$( ".toggleBtn" ).click(function() {})

inside body of the function you first need to define element with class that you want to toggle:

$( ".toggleBtn" ).click(function() {$("#myIcon")})

and I would remove this 'span' element so your html will be like this:

<i id="myIcon" class="fas fa-bars"></i>

and now just add jQuery 'toggleClass' method like this:

$( ".toggleBtn" ).click(function() {$("#myIcon").toggleClass("fa-bars fa-times")})

This should solve your problem.

Go to jQuery docs .toggleClass() and read about it here.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 BoBiTza
Solution 2 Ahmad
Solution 3

Related Questions