Home > Mobile >  How to change/toggle a icon inside a button using bootstrap 5 and jquery?
How to change/toggle a icon inside a button using bootstrap 5 and jquery?

Time：01-28

So I want to change the icon inside my button when it is click so the first icon is <i ></i> and the second icon onclick should be <i ></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 >
<button type="button"  data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse">
            <div >
              <span id='myIcon' ><i ></i></span>
          </button>
            </div>
       
            </div>
     </div>
    </div>
</div>
</body>
</html>

I am posting my code snippet below

CodePudding user response：

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

CodePudding user response：

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 >
    <button onClick="toggleIcon()" type="button"  data-bs-toggle="offcanvas" data-bs-target="#offcanvasExample " data-toggle="collapse">
            <div >
              <span id='myIcon' ><i ></i></span>
          </button>
  </div>

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

</html>

CodePudding user response：

$(document).on('click', '.toggleBtn', function(){
   $('#myIcon').children().toggleClass('fa-times')
})

CodePudding user response：

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" ></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.

Page link：https//www.codepudding.com/Mobile/279980.html

Prev:How to Maintain the HTML5 Video Aspect Ratio according to Div Size
Next:How can i have elispsis on my table cell without using max-width?
  •  Tags：  
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding