varun sharma varun sharma - 7 months ago 62
Javascript Question

Set font awesome icon into jquery

I am ussing html, css3 and jquery. And i want to use font awesome icon into jquery. But i don't know how to use font awesome icon into Jquery.

FONT ICON:

<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>


CODE:

<div class="display-icon">
<i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
</div>


JQUERY CODE:

$('.display-icon').click(function(){
-----FONT AWESOME ICON------
});


Font awesome icon working fine in the html code.
I want to set this icon into jquery code.

Answer

Here is a solution, I would suggest targeting with <i id="myId"> instead of the children of "display icon", more tighter...

<html>
<head>
  <title>Page Title</title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
  <script src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
</head>
<body>
  <div class="display-icon">
    <i class="fa-spinnerZoom fa fa-spinner fa-pulse fa-3x fa-fw "></i>
  </div>
</body>
<script>
    $('.display-icon').click(function() {
      $(this).children("i").attr("class", "fa fa-circle-o-notch fa-pulse fa-3x fa-fw ") ;
    });  
</script>
</html>