Manipulate FontAwesome with Javascript

Question

I'm working on a little project to learn more about Javascript so I can work on svg animations in the future.

Now I'm working on a button that will change his input when you click on it.

circle = document.getElementById('circle');
$remove = document.getElementById('remove');
remove.style.display = "block";
$undo   = document.getElementById('undo');
undo.style.display = "none";

circle.onclick = function() {
  remove.style.display = "none";
  undo.style.display   = "block";
}

.circle {
  width: 200px; height: 200px;
  background-color: #10ac84;
  border-radius: 50%;
} 
.circle svg  { font-size: 1.5em; }

<div class="circle" id="circle">
  <i class="fas fa-trash-alt" id="remove"></i>
  <i class="fas fa-undo" id="undo"></i>
</div>

It's a little hard to put it in a snippet because I can't load the font awesome cdn.

-| What I'm trying to do |-

When you enter the page the circle will have an icon on a trashcan. When the user clicks the circle the trashcan will disappear and the undo icon will show up. This is for removing an item in my application and undo it when you want it back.

-| Question |-

Can I remove and add style to FontAwesome icons? Because it will transform into SVG's

I hope that I have explained it well and that someone can help me out.

Project: http://www.projectnova.nl/changeClick/

Answer 1

Make sure to target the right element whenever you use the SVG with JavaScript method. There won't be an <i> for you to select after the replacement.

Font Awesome uses mutation observers to know when it needs to change the SVG after you change the class.

document.getElementsByTagName("button")[0].addEventListener("click", evt => {
  const icon = evt.currentTarget.querySelector("svg");
  if (icon.classList.contains("fa-user")) {
    icon.classList.remove("fa-user");
    icon.classList.add("fa-github-square");
  } else {
    icon.classList.remove("fa-github-square");
    icon.classList.add("fa-user");
  }
});

<script defer src="https://use.fontawesome.com/releases/v5.0.12/js/all.js" integrity="sha384-Voup2lBiiyZYkRto2XWqbzxHXwzcm4A5RfdfG6466bu5LqjwwrjXCMBQBLMWh7qR" crossorigin="anonymous"></script>

<button><i class="fas fa-user"></i></button>

Answer 2

Be advised, this method only works when using Font Awesome with CSS. To use the JavaScript with SVG method, look at the other answer.

This would be easier to accomplish if you used a single i tag and dynamically changed the icon class.

For example:

<div class="circle">
    <i class="fas fa-trash-alt" id="remove"></i>
</div>

Then you just flip between the fa-undo and fa-trash-alt classes.

// select the element
var removalIcon = document.querySelector("#remove");

// add event listener
removalIcon.addEventListener("click", function () {
    this.className = "fas fa-undo";
});