• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Experts: An interesting one to solve????

LEGEND ,
Jan 02, 2020 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

1.1K

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
community guidelines
Community Expert ,
Jan 02, 2020 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?

Votes

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
community guidelines
LEGEND ,
Jan 02, 2020 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.

 

Votes

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
community guidelines
Community Expert ,
Jan 02, 2020 Jan 02, 2020

Copy link to clipboard

Copied

Votes

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
community guidelines
LEGEND ,
Jan 03, 2020 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.

Votes

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
community guidelines
Community Expert ,
Jan 03, 2020 Jan 03, 2020

Copy link to clipboard

Copied

Votes

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
community guidelines
LEGEND ,
Jan 03, 2020 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>

Votes

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
community guidelines
Community Expert ,
Jan 03, 2020 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 !

Votes

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
community guidelines
LEGEND ,
Jan 03, 2020 Jan 03, 2020

Copy link to clipboard

Copied

LATEST

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

Votes

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
community guidelines