Html Question posted in
Some basic documentation can be found here.

Html – Icons of Font Awesome don't change

I want to change the class ‘fa-meh-blank’ to ‘fa-smile-wink’ but it doesn’t work.

When I flip the two classes, however, it works. I don’t understand what’s wrong, what would anyone have an idea?

const icone = document.querySelector("i");
console.log(icone);

//Je soumets

icone.addEventListener('click', function() {
  console.log('icône cliqué');
  icone.classList.toggle('happy');
  icone.classList.toggle('fa-smile-wink');
});
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="container">
  <div class="bloc-central">
    <h1>Projet Abonnez-vous</h1>
    <div class="bloc-btn">
      <i class="far fa-meh-blank"></i>
      <button class="btn">Abonnez-vous</button>
    </div>
  </div>
</div>
Tags:

3

Answers


  1. Chosen as BEST ANSWER
    0

    I tried the 'fa-meh-blank' Remove. When I clicked it worked. And when I clicked again, my icon disappeared completely.

    I managed to find the solution. I think I expressed myself badly. I wanted to alternate the icons with each click. The following javascript works perfectly.

    My new JavaScript:

    const icone = document.querySelector("i");
    console.log(icone);

    //Je soumets

    icone.addEventListener('click', function(){
  //console.log('icône cliqué');
  icone.classList.toggle('happy');
  icone.classList.toggle('fa-meh-blank');
  icone.classList.toggle('fa-smile-wink');
});
    '
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">

<div class="container">
  <div class="bloc-central">
    <h1>Projet Abonnez-vous</h1>
    <div class="bloc-btn">
      <i class="far fa-meh-blank"></i>
      <button class="btn">Abonnez-vous</button>
    </div>
  </div>
</div>
`


  2. 0 
    const icone = document.querySelector("i");
console.log(icone);

//Je soumets

icone.addEventListener('click', function() {
  console.log('icône cliqué');
  console.log('Before:', icone.classList);

  icone.classList.toggle('fa-meh-blank'); 
  icone.classList.toggle('fa-smile-wink'); 

  console.log('After:', icone.classList);
});

    I think the code is working properly now.
    You forgot to delete the old class before adding the new one.

    Login or Signup to reply.
  3. 0

    Your function is adding classes "happy" and "fa-smile-wink", rather than toggling between the classes which will change the icon. This is what I would do to toggle the icons, using vanilla JavaScript:

    const icone = document.querySelector("i");

icone.addEventListener('click', function() {
  console.log('icône cliqué');
  if (icone.classList.contains('fa-meh-blank')) {
    icone.classList.remove('fa-meh-blank');
    icone.classList.add('fa-smile-wink');
  } else {
    icone.classList.remove('fa-smile-wink');
    icone.classList.add('fa-meh-blank');
  }
});
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" rel="stylesheet" />

<div class="container">
  <div class="bloc-central">
    <h1>Projet Abonnez-vous</h1>
    <div class="bloc-btn">
      <i class="far fa-meh-blank"></i>
      <button class="btn">Abonnez-vous</button>
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search