How to toggle class for font awesome icons with pure javascript?

Question

I am trying to learn javascript and trying to toggle between the empty circle icon and the circle with check mark when the icon is clicked. However, it does not seem to be working.

user_383904 · Answer

Sometimes it's more helpful to define your element default CSS and than use a is-* class modifier - than doing funky stuff with fas classes. Take a look:

const EL_tog = document.querySelector('#toggle');

EL_tog.addEventListener('click', () => {
    EL_tog.classList.toggle("is-active");
});

#toggle:before {
  font-family: "Font Awesome 5 Free";
  content: "\f111";
  font-style: normal;
}

#toggle.is-active:before {
  font-family: "Font Awesome 5 Free";
  content: "\f058";
}

Tomorrow, even if you decide to use another icons-set, you don't need to change the HTML, just your CSS. Which is after all - all what's about.

If you wonder where I got that hex values for CSS content: like \f111 - not a big deal

user_8620333 · Answer

An idea is to use the stacking icons and you can deal with only one class:

var icon = document.getElementById('toggle');

icon.addEventListener('click', (event) => {
  icon.querySelector(':last-child').classList.toggle("fa-check-circle");
});

Related: https://fontawesome.com/how-to-use/on-the-web/styling/stacking-icons

user_5372008 · Answer

We can solve this using vanilla JavaScript.

Just add an onclick listener to the toggle element. Then replace the class fa-circle with fa-check-circle.

const circle = 'fa-circle'
const check = 'fa-check-circle'
const toggler = document.getElementById('toggle')
toggle.onclick = () => {
  toggler.classList.toggle(circle)
  toggler.classList.toggle(check)
}

Another way is using css just define a new class (i.e. active) with the pseudo attribute before like this:

#toggle.active::before {
  content: '\f058';
}

Now, we add an onclick event to the toggle element to add or remove the active class:

toggle.onclick = () => {
  toggler.classList.toggle('active')
}

const toggler = document.getElementById('toggle')
toggle.onclick = () => {
  toggler.classList.toggle('active')
}

#toggle.active::before {
  content: '\f058';
}

How to toggle class for font awesome icons with pure javascript?

3 Answers