Desperately trying to toggle a font awesome icon

[Russinating]

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.

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

$( "#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!

 

[Dj_Jestar]

You don't have a 'data-fa-i2svg' attribute on that element, so it won't be found. Using '.fa' instead works.

 

[GravyMonster]

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()`:

$('#mobilebutton').click(function() {
  $('#mobilenavoverlay').slideToggle('slow');
  $(this).find('i.fa').toggleClass('fa-times fa-bars');
});

 

[touch]

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

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?

 

[GravyMonster]

Not at all, that's not how jQuery works.

If OP want's to change the class after the animation finished then the call to `toggleClass()` should be placed within the callback function.

 

[Russinating]

You don't have a 'data-fa-i2svg' attribute on that element, so it won't be found. Using '.fa' instead works.

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."

 

[touch]

I think you'd use the data tag like this:

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

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

 

[Dj_Jestar]

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

$(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:

<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().

 

[Russinating]

I think you'd use the data tag like this:

*snip*

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

*snip*

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.

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

 

[Dj_Jestar]

I was in a mood, apologies.

Works here so maybe use 'load' instead of 'DOMContentLoaded': https://jsfiddle.net/xrmz16m0/1/

 

[Russinating]

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!

 

[Dj_Jestar]

I'd forgotten to hit update after adding JQuery: https://jsfiddle.net/xrmz16m0/3/

edit: Better yet, this version which doesn't use window.onLoad: https://jsfiddle.net/xrmz16m0/6/

 

[Russinating]

Ok, fixed. Appears I was using an incompatible version of jQuery? I'm now using //code.jquery.com/jquery-git.js (which jsfiddle uses) and it works, before I was using https://code.jquery.com/jquery-latest.min.js.

Any ideas why that latest version would break it?

 

[GravyMonster]

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

 

[Dj_Jestar]

I just used the drop list on jsfiddle