Fontawesome icon is not changing after toggling its class with jquery. Where am i doing it wrong ? Please help...

Question

https://code.sololearn.com/WMyhihPhiXF1/?ref=app

Answer 1

Well it's quite easy.
Wrap your <i> element in <span> and then replace "button" with "span" for *click* event!

Answer 2

The mystery of the error was hidden in the *class* attribute
<i class="fa fa-eye"></i>
here the i is having two classes, not one, "fa" and "fa-eye" seperated by spaces.
So, jQuery's toggleClass method will not work
After using some JavaScript, I got the error resolved 😉
https://code.sololearn.com/W3jl7B1GWP1Z/?ref=app

Answer 3

JQuery toggleClass method perfectly works with how many class names you want, each separated by spaces ^^
The error is due to the fontawesome JS library wich dynamically replace the elements defined with specific classes by svg elements sharing attributes of the initial element, so you cannot use the element tag name to select it: you need to select the new svg created element by another way, as a specific id (that's part of the @Blue solution, but you could still use toggleClass):
$(function() {
$("button").click(function() {
$("#icon").toggleClass("fa-eye fa-eye-slash");
});
});

Answer 4

that works fine but how can i toggle between icons by clicking on them?

Answer 5

Thanks sir, I really appreciate your help. Now i understand how did you do that.

Answer 6

I know this is an older post, but just in case it helps another!..
The first answer almost worked for me.
Create two versions of the the <i> icon you want to display and surround them both in a <span>. Then you can toggle a "d-none" class on the span, switching between the icons you would like to display.