Switch Fontawesome Icon on Click, Not Working

$('.heart-toggle').click(function() {  $(this).find('i').toggleClass('fas far');});

.product-icon-heart {  width: 31%;  text-align: center;  font-size: 1.5em;  cursor: pointer;}.product-icon-heart .heart-toggle {  color: #D6D4D4;}.product-icon-heart .heart-toggle .fas {  color: #8ABE57;}.product-icon-heart .heart-toggle:hover {  color: #8ABE57;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"><!-- FONT AWESOME --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">

<div class="col-12 product-icons">  <div class="col-4 d-inline-block product-icon-heart mr-0">    <a class="heart-toggle" href="#">      <i class="far fa-heart"></i>    </a>  </div>  <div class="col-4 inline-block product-icon-heart mr-0">    <a class="heart-toggle full" href="#">      <i class="fas fa-heart"></i>    </a>  </div></div>

Can't change Font Awesome icon on click?

Your problem is that you try to get the html element .change-icon but you try to get it with $('change-icon') instead of $('.change-icon') where the dot is representing that it is a class

Change this:

$(document).ready(function () {
    $('change-icon').click(function () {
        $('i').toggleClass('far fa-eye far fa-eye-slash');
    });
});

To this:

$(document).ready(function () {
    $('.change-icon').click(function () {
        $('i').toggleClass('fa-eye fa-eye-slash');
    });
});

And i would change $('i') to $('#password-see')

ng-click not working in font-awesome icon

Try this:

<span ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></span>{{comment.like}}

OR, in case you are ok with a button

<button ng-click="LikeComment(comment)"><i class="far fa-thumbs-up"></i></button>{{comment.like}}

How to toggle font awesome icon on click?

You can toggle the class of the i element within the clicked anchor like

<i class="fa fa-plus-circle"></i>

then

$('#category-tabs li a').click(function(){
    $(this).next('ul').slideToggle('500');
    $(this).find('i').toggleClass('fa-plus-circle fa-minus-circle')
});

Demo: Fiddle

cannot change font awesome icon after click

The problem is the element id. You changes the button class not the span.

$(document).ready(function () {
  $("button").click(function () {
    alert(this.id);
    $('#' + this.id).children('span').removeClass("fa fa-cog").addClass("fas fa-spinner fa-spin");
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<div class="col-md-2">
  <button type="button" id="btnGenerateReport" class="btn btn-default btnGenerateReport" aria-label="Left Align" runat="server">
            <span class="fa fa-cog" runat="server" aria-hidden="true"></span>
      </button>
</div>

function arata_ascunde(button) {   var x = $('#showhide');   $(button).find('i').remove();   if ($(button).text().trim() == 'Show') {     $(button).html($('<i/>',{class:'fa fa-eye-slash'})).append(' Hide');     x.fadeIn();    }    else {      $(button).html($('<i/>',{class:'fa fa-eye'})).append(' Show');      x.fadeOut();    }}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>    <button onclick="arata_ascunde(this);" style="align:right;font-size:13px"            class="btn btn-info " id="show_hide_bt" style="background-color:#00b0ff;">        <i class="fa fa-eye"></i> Show    </button>    <div id="showhide" style="background-color:red;width:100px;height:100px;margin:10px;display:none;"></div>

$("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>

$("input:checkbox").click(function() {
  var column = "#report ." + $(this).attr("name");
  $(this).next('i.fa').toggleClass('fa-toggle-on fa-toggle-off');
  $(column).toggle();
});

$("input:checkbox").click(function(e) {
  var column = "#report ." + $(this).attr("name");
  $(column).toggle();
  e.stopPropagation();
});