Change Font Awesome Icon on click

Question

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 this one and this one and this one) but have been unsuccessful in getting a working example.

In this case I am trying to change the facebook icon to a tick.

HTML:

<html>
  <head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="./java.js"></script>
  </head>
  <body>
    <div>
      <a href="javascript:void" rel="me"><i class="fa fa-twitter-square fa-3x"></i></a>
      <a id="facebookicon" href="javascript:void" rel="me"><i class="fa fa-facebook-square fa-3x"></i></a>
    </div>
  </body>
</html>

Javascript:

$('#facebookicon').click(function(){
    $(this).find('i').toggleClass('fa-facebook-square fa-check-square')
});

I have also tried this Javascript code:

$('body').on('click', '#facebookicon', function(){
   $('i').toggleClass('fa-facebook-square fa-check-square');
});

When I click of the icon I get a syntax error in the console:

SyntaxError: expected expression, got end of script

I think this relates to the javascript:void 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.

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.

Can someone point me in the right direction?

@Jai and @Manoz The use of `javascript:void(0)` does solve the syntax error I was having but when I copy and paste your code I do not get the icons changing locally in Firefox 50.1. @Jai your answer does seem to do so here but I am unable to reproduce it locally and even so it changes back if i click it twice. — G_T, Apr 13 '17 at 05:17
This should work as @Jai mentioned in his answer. The only suspect is how do you render `#facebookicon` in your DOM. Does this exist or you load it dynamically? — Manoz, Apr 13 '17 at 05:51
@Lee Han Kyeol Does this help? https://jsfiddle.net/g_thomson/05zb3L6m/13/ — G_T, Apr 13 '17 at 06:56
@Manoz I am new to this. What is the difference? I don't think it is dynamically. `#facebookicon` is a font icon from the font awesome package. — G_T, Apr 13 '17 at 06:59
@Jai Could you take a look at my JSfiddle as it doesn't work there either — G_T, Apr 13 '17 at 07:32
@G_T, works there - https://jsfiddle.net/05zb3L6m/14/ you forgot to include jquery. — Manoz, Apr 13 '17 at 10:56
@Manoz I see. But for some reason it still doesn't run locally where I am loading jquery. — G_T, Apr 13 '17 at 11:00
@G_T, Can you paste your whole html here - https://pastebin.com/ — Manoz, Apr 13 '17 at 12:17
@G_T, Seems everything is correct in your html. I am not sure if your path to `java.js` is correct ? That might be culprit, No? — Manoz, Apr 14 '17 at 04:32
@Manoz it is the first javascript clip in the question and also the JSfiddle — G_T, Apr 14 '17 at 04:35

Jai · Answer 1 · 2017-04-13T05:11:29.107

0

You have to use javascript:void(0) in the href attribute of your anchor and as i mentioned in the comment you can use your first snippet if your anchor elements are not created dynamically:

$('#facebookicon').click(function() {
  $(this).find('i').toggleClass('fa-facebook-square fa-check-square')
});

  a {color: magenta;

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <a href="javascript:void(0)" rel="me"><i class="fa fa-twitter-square fa-3x"></i></a>
  <a id="facebookicon" href="javascript:void(0)" rel="me"><i class="fa fa-facebook-square fa-3x"></i></a>
</div>

edited Apr 13 '17 at 05:11

answered Apr 13 '17 at 05:06

Jai

74,255
12
74
103

see my comment above – G_T Apr 13 '17 at 05:17
@G_T That is strange but here it is not easy to say what is going on. can you confirm you don't get any error in the console while doing that? – Jai Apr 13 '17 at 05:19
When I copy the code in the div tags of your answer into the body of the HTML of my question I can confirm I don't get any errors in the console. – G_T Apr 13 '17 at 05:22

score 0 · Answer 2 · answered Apr 13 '17 at 05:06

0

Change javascript:void to javascript:void(0) or javascript:;

Here is an example https://jsfiddle.net/54wkxk4y/

answered Apr 13 '17 at 05:06

Manoz

6,507
13
68
114

See my comment above – G_T Apr 13 '17 at 05:17

Change Font Awesome Icon on click

2 Answers2