Highlighted

Experts: An interesting one to solve????

LEGEND ,
Jan 02, 2020

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.

Topics

Code

Views

816

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Experts: An interesting one to solve????

LEGEND ,
Jan 02, 2020

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.

Topics

Code

Views

817

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Adobe Community Professional ,
Jan 02, 2020

Copy link to clipboard

Copied

Weird, fa-minus-square works fine, but fa-minus is a no-go.

Something conflicting within W3schools site maybe?

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 02, 2020

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.

 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 02, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 03, 2020

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 03, 2020

Copy link to clipboard

Copied

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
LEGEND ,
Jan 03, 2020

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>

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Adobe Community Professional ,
Jan 03, 2020

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 !

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
osgood_ LATEST
LEGEND ,
Jan 03, 2020

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!)

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...