Toggle Class With Font Awesome Not Working

Question

I have multiple buttons, when a like button is clicked I would like the font awesome icon to switch as well, however, the way I have it set up the font awesome icon just disappears, but I can see the class change. Not sure where to go from here.

 $("button").click(function() { $('#like' + this.id).toggleClass("fa-regular fa-thumbs-up"); });

 <script src="https://kit.fontawesome.com/317f6467e2.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="like-button btn" id="1"> <i class="fa-solid fa-thumbs-up" id="like1"></i> </button> <button class="like-button btn" id="2"> <i class="fa-solid fa-thumbs-up" id="like2"></i> </button>

Answer 1

If you want to change icon/style just add other class to toggleClass like:

 $("button").click(function() { $('#like'+this.id).toggleClass("fa-solid fa-thumbs-up fa-regular fa-thumbs-up"); });

 <script src="https://kit.fontawesome.com/317f6467e2.js" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button class="like-button btn" id="1"> <i class="fa-solid fa-thumbs-up" id="like1"></i> </button> <button class="like-button btn" id="2"> <i class="fa-solid fa-thumbs-up" id="like2"></i> </button>