Welcome to Designer Dairy

Step1:

When the E-mail icon should be enable and disable as per functionality..

So we  what we did is --- given a class name  called resetpass is an <a> Tag

Step 2:

 when  .fa is  clicked it will check  whether  class fa-envelope is there.... it will remove
 
removeClass('fa-envelope') and add  the new class addClass('fa-envelope-o').

we have two different icons with different name..

Step 3:

 We have implemented in the Script using jquery.

<script>
$(document).ready(function(e) {
 $('.resetpass').on('click', '.fa', function(e)
{
 if ($(this).hasClass('fa-envelope') ) {
  $(this).removeClass('fa-envelope').addClass('fa-envelope-o');
   
   }
else
    {
          $(this).removeClass('fa-envelope-o').addClass('fa-envelope');
    }

 event.stopPropagation();   
});
});

</script>

Step 4:

 HTML Code:

<td><a href="#" class="resetpass"><i class="fa fa-envelope fa-2x"></i> </a> </td>

Enjoy Folks