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/

Are you using the SVG-with-JS method or the WebFonts-with-CSS method? — zero298
– zero298, Commented May 8, 2018 at 20:29
Yes, i do. [fa-svg-with-js.css] and [fontawesome-all.min.js] — Nova
– Nova, Commented May 8, 2018 at 21:00

zero298 · Accepted Answer · 2018-05-08 20:47:57Z

2

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>

edited May 8, 2018 at 20:47

answered May 8, 2018 at 20:34

zero298

27.1k10 gold badges80 silver badges109 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nova Over a year ago

I see it works for you. But in my current setup it won't work.. I'll start a new project soon and I will see if I can get it to work. Thanks for your input. Helps a lot.

Lars Peterson Over a year ago

In case anyone is concerned, IE10 does NOT support const.

Nova Over a year ago

Not even with 'use strict'?

Lars Peterson · Accepted Answer · 2018-05-08 21:10:36Z

1

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";
});

edited May 8, 2018 at 21:10

answered May 8, 2018 at 20:26

Lars Peterson

1,5321 gold badge12 silver badges27 bronze badges

2 Comments

Nova Over a year ago

This doesn't work for me. It won't change the class name. Maybe because Font Awesome changes I tags into SVG? When i console.log the I tag it changed the class names. But on the page nothing changed.

zero298 Over a year ago

This should work with the JS method as well. Font Awesome uses mutation observers to watch the class list of the element to know when it needs to regenerate the SVG. The id will be put onto the new <svg> element (along with any other attributes). The issue is that you are caching the selected element. Attach the listener to the .circle and query select for the #remove on each click.

Collectives™ on Stack Overflow

Manipulate FontAwesome with Javascript

2 Answers 2

3 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related