Copy link to clipboard
Copied
Whilst helping out in another thread today I wanted to toggle a Fontawesome icon - fa-bars to fa-minus. Usually swapping Fontawesome icons is a no brainer using javascript toggle, as in the example below:
https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_toggle_like_dislike
Try it with fa-bars and fa-minus - why doesn't it work like the example which toggles fa-thumbs-up/fa-thumbs-down???
Edit
Although it work the other way around toggling fa-minus to fa-bars..........
Maybe I'm still too full of beer.
Copy link to clipboard
Copied
Weird, fa-minus-square works fine, but fa-minus is a no-go.
Something conflicting within W3schools site maybe?
Copy link to clipboard
Copied
Nope not a fault of the W3 schools website, I did a local test and looked in the console - the class is being applied 'fa fa-bars fa-minus' but it doesnt change to a minus icon, whereas if I used the fa-thumbs-up or fa-thumbs-down class the icon changed.
To get it to work I had to check to see if the class list contained fa-bars, remove it if it did and apply fa-minus but that's not as simple/streamlined as just toggling the class.
No idea why its not working, madness.
Copy link to clipboard
Copied
change your creamer, use https://use.fontawesome.com/releases/v5.0.7/css/all.css
Copy link to clipboard
Copied
That appears to be less responsive to toggle than v4.7 - I can't get any 'direct' toggling working using v5..........hummm.
Below works in both v4.7 and v5 - (testing to see if 'fa-bars' exists in the class list):
const faBars = document.querySelector('.fa-bars');
faBars.onclick = function() {
if(this.classList.contains('fa-bars')) {
this.classList.remove('fa-bars');
this.classList.add('fa-minus');
}
}
This doesn't work in either v4.7 and v5 but should:
const faBars = document.querySelector('.fa-bars');
faBars.onclick = function() {
farBars.classList.toggle('fa-minus');
}
Strange thing is if one looks in the inspector at the code examples both show fa-minus assigned - 'fas fa-bars fa-minus' BUT only the first instance actually swaps the icons.
Copy link to clipboard
Copied
Copy link to clipboard
Copied
Bizzare indeed. However the fa-thumbs-up/fa-thumbs-down icons then don't work with v5 linked.........something weird going on here. Yet v5 will toggle thumbs-down to thumbs up but not the other way around thumbs-up to thumbs down, similar v5 will toggle bars to minus but not minus to bars. Is this to do with css, the order in which they appear when toggled?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.7/css/all.css">
<style>
.fa {
font-size: 50px;
cursor: pointer;
user-select: none;
}
.fa:hover {
color: darkblue;
}
</style>
</head>
<body>
<p>Click on the icon to toggle between thumbs-up and thumbs-down (like/dislike):</p>
<i onclick="myFunction(this)" class="fa fa-thumbs-up"></i>
<script>
function myFunction(x) {
x.classList.toggle("fa-thumbs-down");
}
</script>
</body>
</html>
Copy link to clipboard
Copied
yep, you're right. and if you invert up and down (down being on the page first, and up displaying on the click) it works... amazing isn't it ???
it is true that since the redesign (in version 3 https://github.com/FortAwesome/Font-Awesome/tree/fa-4) I noticed some inconsistencies between the layout of the icons, their backward compatibility, without forgetting the naming of the classes.
so, progressively I switched the old projects to other font toolkits.
well ... the grass isn't greener elsewhere either !
Copy link to clipboard
Copied
Oh well I'll just check to see if a class exists and remove it and replace it with the one that is needed. It's just too confusing to understand what Fontawesome version icons work when attempting to toggle them. Poor if you ask me, surely they must know a developer needs to toggle the icons using the most efficient workflow. Just glad I'm not paying for the pro version (maybe that actually works!)