Desperately trying to toggle a font awesome icon

Russinating

Russinating

Russinating

Soldato
Joined
27 Dec 2005
Posts
17,310
Location
Bristol
As title, I'm probably overlooking something really simple. Just trying to get the bars icon to change to a times and vice versa when clicked. Here's the code.

Code: 
<div id="mobilebutton"><i class="fa fa-bars"></i></div>

Code: 
$( "#mobilebutton" ).click(function() {
  $( "#mobilenavoverlay" ).slideToggle( "slow", function() {
  });
        $(this)
        .find('[data-fa-i2svg]')
        .toggleClass('fa-times')
        .toggleClass('fa-bars');
});

jQuery code is within a $(document).ready(function(){. I've followed the instructions on https://fontawesome.com/how-to-use/svg-with-js#with-jquery and used their code, but nada. Heeelp!
 
You can also tidy up the JS a little as you don't need the callback function you pass to slideToggle(), as you don't do anything with it, and you can join multiple classes with a space between them in toggleClass()`:

Code: 
$('#mobilebutton').click(function() {
  $('#mobilenavoverlay').slideToggle('slow');
  $(this).find('i.fa').toggleClass('fa-times fa-bars');
});
 
Spunkey said:
You can also tidy up the JS a little as you don't need the callback function you pass to slideToggle(), as you don't do anything with it
Click to expand...

Might be for timing? He's got it set to 'slow' so maybe if he doesn't use the callback it would change the class before the animation finished?
 
Dj_Jestar said:
You don't have a 'data-fa-i2svg' attribute on that element, so it won't be found. Using '.fa' instead works.
Click to expand...

That doesn't work because I'm using the SVG version of FA. The data tag is from their documentation; "If you absolutely need to attach events to the icon you can use the data-fa-i2svg attribute but you need to allow for the dynamic creation of the svg element."
 
I think you'd use the data tag like this:

Code: 
<div id="mobilebutton"><i class="fa fa-bars" data-fa-i2svg="russ-icon"></i></div>

Code: 
$( "#mobilebutton" ).click(function() {
  $( "#mobilenavoverlay" ).slideToggle( "slow", function() {
  });
        $(this)
        .find('[data-fa-i2svg="russ-icon"]')
        .toggleClass('fa-times')
        .toggleClass('fa-bars');
});
 
Russinating said:
That doesn't work because I'm using the SVG version of FA. The data tag is from their documentation; "If you absolutely need to attach events to the icon you can use the data-fa-i2svg attribute but you need to allow for the dynamic creation of the svg element."
Click to expand...
I don't care what it says. It doesn't work because your element doesn't have a data-fs-i2svg attribute on it. Capicé?

You might as well change the selector to
Code: 
$(this).find("lol-never-going-to-find-anything")
for all that that's worth.

So either change the selector to match your element, or add the attribute to the element.

e: https://jsfiddle.net/vkbvt4tk/

e2: Further reading on their site - you need to allow for the dynamic loading as per the same line you just quoted to me. So use the example they give immediately after:

HTML: 
<nav>
  <ul style="list-style: none; margin: 0; padding: 0;">
    <li><i class="fa fa-user fa-2x"></i></li>
  </ul>
</nav>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    $('nav').on('click', '[data-fa-i2svg]', function () {
      alert('You clicked the icon itself');
    });
  });
</script>

note the use of jQuery's .on("click", selector, handler) instead of .click().
 
Last edited:
touch said:
I think you'd use the data tag like this:

*snip*
Click to expand...

Adding the data-fa-i2svg attribute manually to any icon prevents it from displaying.

Dj_Jestar said:
*snip*
Click to expand...

Not sure why you're being so passive aggressive. Your post contradicts itself now you've read their documentation re: the data-fs-i2svg attribute being added.

I've completely copied FA's code now, below, and still nothing. The #mobilenavoverlay displays so it's finding the object, just not able to toggle the class.

Code: 
<button>Open up <i class="fa fa-angle-right"></i></button>

<script>
document.addEventListener('DOMContentLoaded', function () {
    $('button').on('click', function () {
        $( "#mobilenavoverlay" ).slideToggle( "slow" );
      $(this)
        .find('[data-fa-i2svg]')
        .toggleClass('fa-angle-down')
        .toggleClass('fa-angle-right');
    });
  });
  </script>
 
No problem :). Thanks for your help so far.

So that jsfiddle link doesn't work for me (as in, the code doesn't toggle the icon). Not a browser issue though since the example on FA's website works.

I hate jS!
 
It's the other way around. You were using 1.11 which broke it. Even though the URL calls this the 'latest' version, it's not. The '-git' version is 3.3.2-pre. I'd be careful using a pre-release version too. 3.3.1 is the latest stable release.

I'd strongly suggest using the Google CDN instead of the jQuery one. It's more reliable for a start:

https://developers.google.com/speed/libraries/#jquery
 
You must log in or register to reply here.
Back
Top Bottom