jQuery issue with replacing Font Awesome 5 icon on click?

Question

I am trying to change a play button to be a pause button using Font Awesome 5. I don't understand why it seems to just not toggle on click. It recognizes the clicks (I tried with an alert, so it recognizes when I press the button itself) but it will just not find the element inside and change it.

This is my code:

$(".startButton").click(function() {
  $(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle")
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
  <script defer src="https://use.fontawesome.com/releases/v5.0.6/js/all.js"></script>
</head>

<div id="timerWrapper">
  <div class="valuesWrapper">
    <div class="values"> 00:00:00</div>
  </div>
  <div id="buttonWrapper">
    <button class="startButton"><i class="fas fa-play-circle"></i></button>
    <button class="stopButton">Stop</button>
    <button class="clearButton">Clear</button>
  </div>
</div>

I made this JSfiddle and tried to modify to have it show an alert if the class is the play button and it doesn't seem to be working? https://jsfiddle.net/62aetgtj/3/ — , Feb 25 '18 at 21:19
ah this changes everything :) you are using FA 5 that remove the i to make it svg ;) this is very important to specify ! unless your question is completely irrelevant — Temani Afif, Feb 25 '18 at 21:23
Sorry!! I'm new to this. I had seen other people mention the svg, and I tried to modify the 'i' to 'svg' but it still didn't solve my issue. I'm just not sure what I'm doing wrong here — , Feb 25 '18 at 21:29
modify you question to include the relevant part ;) am gonna add an anwser — Temani Afif, Feb 25 '18 at 21:32
I just did - hope it is better now and thanks for your help! — , Feb 25 '18 at 21:42

Temani Afif · Accepted Answer · 2018-07-29T20:12:00.180

The main issue with your code is that you are using Font Awesome 5 that changes the i element to svg so your code won't work.

You have two solution:

The easiest one is to use the CSS version of Font Awesome 5 and you will be able to keep your code as it is:

$(".startButton").click(function() {
  $(this).find("i").removeClass("fa-play-circle").addClass("fa-pause-circle");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" rel="stylesheet">
<div id="timerWrapper">
  <div class="valuesWrapper">
    <div class="values"> 00:00:00</div>
  </div>
  <div id="buttonWrapper">
    <button class="startButton"><i class="fas fa-play-circle"></i></button>
    <button class="stopButton">Stop</button>
    <button class="clearButton">Clear</button>
  </div>
</div>

The other solution is to change your code in order to handle the SVG. So you may change the data-icon attribute of the generated svg with the needed icon:

$(".startButton").on('click',function() {
  $(this).find('svg').attr("data-icon",'pause-circle');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script defer src="https://use.fontawesome.com/releases/v5.2.0/js/all.js"></script>
<div id="timerWrapper">
  <div class="valuesWrapper">
    <div class="values"> 00:00:00</div>
  </div>
  <div id="buttonWrapper">
    <button class="startButton"><i class="fas fa-play-circle"></i></button>
    <button class="stopButton">Stop</button>
    <button class="clearButton">Clear</button>
  </div>
</div>

jQuery issue with replacing Font Awesome 5 icon on click?

1 Answers1