Switch Between Icons When Using Fontawesome 5.0 Svg Framework

April 21, 2024 Post a Comment

I'm looking to be able to switch between icons in Javascript while using the new FontAwesome SVG framework. Previously in the old WebFont method, this was achieved by toggling or c

Solution 1:

Font Awesome 5.0.0 has just been released and the migration from 4.7 to 5.0 wrecked up my javascript/jquery to change a "fa-star-o" icon to "fa-star" when the user clicks on it.

I managed to fix it so I wanted to share with you these two tips:

The icon in HTML:

<iclass="foo fas fa-star"></i>

1) Change icon with jQuery (from "star" to "alarm-clock" and vice versa):

var icon = $('.foo');
var icon_fa_icon = icon.attr('data-icon');

if (icon_fa_icon === "alarm-clock") {
    icon.attr('data-icon', 'star');
} else {
    icon.attr('data-icon', 'alarm-clock');
}

2) Change icon-style with jQuery (from 'fas' to 'far'):

var icon = $('.foo');
var icon_fa_prefix = icon.attr('data-prefix');

if (icon_fa_prefix === 'fas') {
    icon.attr('data-prefix', 'far');

} else {
    icon.attr('data-prefix', 'fas');
}

Hope that helps anyone with the same issue.

Solution 2:

Verified with FA 5.0.2

I modified the original documentation found on Font-Awesome's website here. The selector on their website wasn't selecting the proper element, so we need to modify the attribute.

HTML

<divclass='icon'><iclass='far fa-minus-square'></i></div>

The class of the div doesn't really matter so much as we can change it. Looking at the javascript, we are using the element to find the svg and specifically, we are looking for the data-icon attribute. Once we know the data attribute, we can change it every time it is clicked.

So in this case, it starts off with the minus-square. If the icon is the minus-square, it changes it to the plus-square. If it is not the plus-square, it will change it to the minus-square.

JQuery

document.addEventListener('DOMContentLoaded', function () {
    $('.icon').on('click', function () {
      if ($(this).find('svg').attr('data-icon') == 'minus-square' ) {
        $(this).find('svg').attr('data-icon', 'plus-square');
      } else {
        $(this).find('svg').attr('data-icon', 'minus-square');
      };
    });
  });

Solution 3:

Assuming you are using the recommended method with the fontawesome.js sheet, I found this on the official documentation:

Changing icons by changing class:

<button>Open up <iclass="fa fa-angle-right"></i></button><script>document.addEventListener('DOMContentLoaded', function () {
    $('button').on('click', function () {
      $(this)
        .find('[data-fa-i2svg]')
        .toggleClass('fa-angle-down')
        .toggleClass('fa-angle-right');
    });
  });
</script>

Solution 4:

I had the same problem as well, and I found (after scrolling right to the very end) that the FontAwesome website states the following:

Nest <svg> tags instead of replacing
There may be some cases where the replacement of the <i> tag is just not working out like you need it to.
You can configure Font Awesome to nest the within the tag.

To do so, just the FontAwesomeConfig object and set autoReplaceSvg: 'nest'.

<script>FontAwesomeConfig = { autoReplaceSvg: 'nest' }
</script>

Solution 5:

Didn't find any documentation about this. As it's not offically released yet, you can use this workaround (jQuery):

$('svg.fa-toggle-off').replaceWith('<i class="fas fa-toggle-on"></i>');

Html5 Pros