how to change font awesome icons on click?

Question

I'm use Font awesome icons in my vBulletin style and i want to change the (minus) icon to (plus) when click ! Is there a way to do it ?

    <a rel="nofollow" style="float:left" href="#" onclick="return
 toggle_collapse('forumbit_$forumid')">
 <span style="color:#24356C;" >
<i class="fa fa-minus-square-o fa-2x"></i>
</span>
</a>

score 0 · Answer 1 · edited May 23 '17 at 12:01

0

I think this question(and the answer) can help you do what you want :)

Change an element's class with JavaScript

edited May 23 '17 at 12:01

Community

1
1

answered May 16 '15 at 09:19

DilyanYankov

54
3

i have tried to do and i've succeeded, but when i clicked for one time the icon is changed from minus to plus icon , then remain plus until Reload the page again to return - but it works without problems here http://jsfiddle.net/WRONG_WAY/ub5jumo0/ – WRONG WAY May 17 '15 at 03:28
I am not sure why that would not work but I devised a little check in JSfiddle you may try: http://jsfiddle.net/ub5jumo0/5/ – DilyanYankov May 17 '15 at 12:36

score -1 · Answer 2 · answered May 31 '19 at 02:01

Assign an id to your icon, e.g.

<i class="fa fa-minus-square-o fa-2x" id="i-1"></i>

The id can be dynamic value like 'i-$forumid' depend on how you generate your html.

In your toggle_collapse('forumbit_$forumid') function, Add

var e = document.getElementById('i-1');
if (e.classList.contains('fa-plus-square-o')) {
  e.classList.toggle('fa-plus-square-o');
} else {
  e.classList.add('fa-plus-square-o');
}

or

function toggle_collapse(forumID) {
  ...

  var iconID = 'i-' + formumID.replace('forumbit_','')
  var e = document.getElementById(iconID);
  if (e.classList.contains('fa-plus-square-o')) {
    e.classList.toggle('fa-plus-square-o');
  } else {
    e.classList.add('fa-plus-square-o');
  }

  ...
}

how to change font awesome icons on click?

2 Answers2