CODEWITHSUNDEEP
javascripthtmlcssfont-awesomefont-awesome-5
chibiw3n
chibiw3n

Reputation: 357

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

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.

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<head>
</head>
<body>
 <i class="far fa-circle" id="toggle"></i>
 <script>
    document.addEventListener('click', (event) =>{
        if(event.target.id == 'toggle'){
            document.getElementById('toggle').classList.toggle("fas fa-check-circle");
        }
    });
 </script>

</body>
</html>

Upvotes: 3

Views: 2946

Answers (3)

Teocci
Teocci

Reputation: 8996

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)
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>

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';
}
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>
<i id="toggle" class="far fa-circle"></i>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 274086

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");
});
<script src="https://kit.fontawesome.com/0c7c27ff53.js" crossorigin="anonymous"></script>

<span class="fa-stack fa-2x" id="toggle">
  <i class="far fa-circle fa-stack-2x"></i>
  <i class="fas fa-stack-2x"></i> <!-- OR "far" for the other version -->
</span>

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

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206627

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";
}
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">

<i id="toggle"></i>

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

Upvotes: 2

Related Questions