CODEWITHSUNDEEP
javascriptcss
meysam code
meysam code

Reputation: 19

Add Font Awesome icons to a button and change them on click

How can I add two icons, top and bottom, so that when the button is clicked, the icon changes (like changing the accordion icon)?

function toggle_div_fun(id) { 
  var divelement = document.getElementById(id); 

  if (divelement.style.display == 'flex') divelement.style.display = 'none'; 
  else divelement.style.display = 'flex';
}
<button class="eco-btn" onclick="toggle_div_fun('sectiontohide');">Click here</button>
<div id="sectiontohide">This is the div to hide</div>

Upvotes: 1

Views: 1237

Answers (2)

Yogi
Yogi

Reputation: 7184

Toggling Icons

This is a general solution for toggling button icons. The buttons are entirely configured in markup. You can have any number of toggle buttons on the page and each can have any number of icons assigned. The code rotates an active class through the list of icons, but otherwise avoids modifying the buttons.

The first step is to create a css rule that hides inactive icons:

.icon-button :not(.active) {
  display:none;
}

Then we add some JavaScript that can be called by a click handler or other event. The code simply moves the active class to the next icon. Yet, if there isn't a next icon then it recycles to the first icon in the list.

  function toggleIcons() {

    // get the next icon in the list
    let next = button.querySelector('.fa-solid.active ~ .fa-solid');

    // else use the first icon 
    if (!next) next = button.querySelector('.fa-solid:first-child');

    // hide the active icon
    button.querySelectorAll('.fa-solid.active')
      .forEach(icon => icon.classList.remove('active'));

    // and show the next one
    if (next) next.classList.add('active'); 
  }

Snippet

The code is written for font-awesome icons, but could easily be modify to work with other icon sets like Bootstrap Icons. As can be seen in the markup, you can preset which icon displays first by adding the active class to it.

// assume DOMContentLoaded

document.querySelectorAll('.icon-button').forEach(button => {

  button.addEventListener('click', function() {
    let next = button.querySelector('.fa-solid.active ~ .fa-solid');
    if (!next) next = button.querySelector('.fa-solid:first-child');
    button.querySelectorAll('.fa-solid.active')
      .forEach(icon => icon.classList.remove('active'));
    if (next) next.classList.add('active');
  })

});
body {
   font-family: sans-serif;
}
.icon-button {
  cursor: default;
}
.icon-button :not(.active) {
  display:none;
}
<button class="icon-button">
  <i class="fa-solid fa-pause"></i>
  <i class="fa-solid fa-play active"></i>
  <i class="fa-solid fa-stop" style="color:red;"></i>
  Player
</button>

<button class="icon-button">
  <i class="fa-solid fa-brush active"></i>
  <i class="fa-solid fa-pencil"></i>
  <i class="fa-solid fa-paint-roller"></i>
  Draw
</button>

<div class="icon-button" style="display:inline-block;margin-left:2rem;">
  <i class="fa-solid fa-toggle-off active" style="color:red"></i>
  <i class="fa-solid fa-toggle-on" style="color:green"></i>
  Toggle 
</div>

<div class="icon-button" style="display:inline-block;margin-left:2rem;">
  <i class="fa-solid fa-circle-check" style="color:red"></i>
  <i class="fa-solid fa-circle-check active" style="color:green"></i>
  Toggle 
</div>

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>

Upvotes: 1

Halo
Halo

Reputation: 1970

Here is a working demo of what you probably want:

let btn = document.getElementById("toggle");

btn.addEventListener('click', function(){
    if(btn.firstChild.classList.contains("fa-up-long")){
      btn.innerHTML = '<i class="fa-solid fa-down-long"></i> Click me!';
    } else {
      btn.innerHTML = '<i class="fa-solid fa-up-long"></i> Click me!';
    }
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" rel="stylesheet"/>

<button id="toggle"><i class="fa-solid fa-up-long"></i> Click me!</button>

Upvotes: 2

Related Questions