How do I change a icon upon clicking it in Bootstrap 4?

Question

I have this

<div class="container">
    <button id="menu-sound" class="btn video-icon" onclick="SoundOnAndOff()">
        <i class="fa fa-volume-up"></i>
    </button>
</div>

and in js

$('#menu-sound').click(function(){
$(this).find('i').toggleClass('fa-volume-up').toggleClass('fa-volume-off');
});

Why don't work ?

Possible duplicate of [Manipulate FontAwesome with Javascript](https://stackoverflow.com/questions/50241622/manipulate-fontawesome-with-javascript) — zero298, May 15 '18 at 16:16
What version of font awesome? they moved to svg elements with 5 and the `` tag is commented out in the frontend code now. — Joseph Marikle, May 15 '18 at 17:01

score 2 · Answer 1 · answered May 15 '18 at 16:25

Maybe, mistake in library. This work fine.

$('#menu-sound').click(function(){
$(this).find('i').toggleClass('fa-volume-up').toggleClass('fa-volume-off');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet">
<div class="container">
    <button id="menu-sound" class="btn video-icon">
        <i class="fa fa-volume-up"></i>
    </button>
</div>

score 1 · Answer 2 · answered May 15 '18 at 16:22

The example that you've provided works perfectly fine. There will be another problem. Maybe your libraries are not loading correctly. So find out more about debugging your code and you'll find the problem pretty soon.

$('#menu-sound').click(function() {
  $(this).find('i').toggleClass('fa-volume-up').toggleClass('fa-volume-off');
});

function SoundOnAndOff() {
  console.log('toggling sound');
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css" integrity="sha384-DNOHZ68U8hZfKXOrtjWvjxusGo9WQnrNx2sqG0tfsghAvtVlRW3tvkXWZh58N9jp" crossorigin="anonymous">

<div class="container">
  <button id="menu-sound" class="btn video-icon" onclick="SoundOnAndOff()">
        <i class="fa fa-volume-up"></i>
    </button>
</div>

Further reading:

Liam answered already How can I debug my JavaScript code? [closed]

score 0 · Answer 3 · answered May 15 '18 at 16:58

I've solved this problem in another way. You can see my Plunker Demo here.

 $(document).ready(function() {
  $('#menu-sound').click(function() {
    console.log($('#icon-menu-sound').hasClass('fa-volume-up'));
    if ($('#icon-menu-sound').hasClass('fa-volume-up')) {
      $('#icon-menu-sound').removeClass('fa-volume-up');
      $('#icon-menu-sound').addClass('fa-volume-off');
    } else if ($('#icon-menu-sound').hasClass('fa-volume-off')) {
      $('#icon-menu-sound').removeClass('fa-volume-off');
      $('#icon-menu-sound').addClass('fa-volume-up');
    }
  });
});

I've changed the HTML a bit

<div class="container">
<button id="menu-sound" class="btn video-icon">
<i id='icon-menu-sound' class="fa fa-volume-up"></i>
</button>

How do I change a icon upon clicking it in Bootstrap 4?

3 Answers3