title: Change Font Awesome Icon on click
body: <p>I am trying to change the class of a font awesome icon so that it changes icon when clicked. I have read several other questions (like <a href="https://stackoverflow.com/questions/195951/change-an-elements-class-with-javascript">this one</a> and <a href="https://stackoverflow.com/questions/41147392/font-awesome-icon-wont-change-onclick">this one</a> and <a href="https://stackoverflow.com/questions/23266545/how-to-toggle-font-awesome-icon-on-click">this one</a>) but have been unsuccessful in getting a working example.</p>
  
  <p>In this case I am trying to change the facebook icon to a tick.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"/&gt;
      &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css"&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="./java.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div&gt;
        &lt;a href="javascript:void" rel="me"&gt;&lt;i class="fa fa-twitter-square fa-3x"&gt;&lt;/i&gt;&lt;/a&gt;
        &lt;a id="facebookicon" href="javascript:void" rel="me"&gt;&lt;i class="fa fa-facebook-square fa-3x"&gt;&lt;/i&gt;&lt;/a&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt; 
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$('#facebookicon').click(function(){
      $(this).find('i').toggleClass('fa-facebook-square fa-check-square')
  });
  </code></pre>
  
  <p>I have also tried this Javascript code:</p>
  
  <pre><code>$('body').on('click', '#facebookicon', function(){
     $('i').toggleClass('fa-facebook-square fa-check-square');
  });
  </code></pre>
  
  <p>When I click of the icon I get a syntax error in the console:</p>
  
  <pre><code>SyntaxError: expected expression, got end of script
  </code></pre>
  
  <p>I think this relates to the <code>javascript:void</code> but i'm not sure. When I tried to fix this the answers all seem to be people having quotation marks in the wrong place or mixing and matching double and single quotes. I don't think that it is the case here.</p>
  
  <p>I see many people aiming to have the toggle effect but ultimately I would like it such that it changes once and will NOT change back if clicked again. </p>
  
  <p>Can someone point me in the right direction? </p>