FA5 Toggle Icon on Collapse

Question

I am in the process of transitioning from FA4 to FA5 and and some of my old code is no longer working.

I was previously using the below code to transition from a down arrow to a right arrow when the Bootstrap4 Collapse component was triggered. Now that I am using the SVG-JS FA5, it is no longer able to change the icon. I appreciate that the icon codes have changed, but this doesn't make a difference in this case.

<a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
  <i class="fa" style="margin-right:15px"></i>Orders <span class="badge badge-light">(9)</span>
</a>

......

[data-toggle="collapse"] i:before{
  content: "\f078";
}

[data-toggle="collapse"].collapsed i:before{
  content: "\f054";
}

Any ideas how I can easily change the FA5 icon automatically when the collapse component is triggered? I could brute force it with JQuery but it would be ugly, and I presume a better method is available.

Thanks Stephen

Zanderi Zanderi · Accepted Answer · 2018-04-15T22:57:52

In Fa5 there are some considerable changes, as the icons are actually swapped out for svgs you have to manipulate the dom to make your changes that you are looking for. (Not as convenient as your css classes). So in this instance Bootstrap provides methods that trigger when a menu is triggered:

If you piggy back on the event you can trigger your class change (the class change must be on the svg element)

$('a[data-toggle]').on('show.bs.collapse', '#my-main-menu-name', function(){
  //this is the anchor tag you triggered
  $(this).find('svg[data-fa-i2svg]')
    .toggleClass('fa-angle-down')
    .toggleClass('fa-angle-right');
})

Fa5 replaces the traditional icon tag with the svg tag:

<svg class="svg-inline--fa fa-thumbs-up fa-w-16" aria-hidden="true" data-prefix="far" data-icon="thumbs-up" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M466.27 286.69C475.04 271.84 480 256 480 236.85c0-44.015-37.218-85.58-85.82-85.58H357.7c4.92-12.81 8.85-28.13 8.85-46.54C366.55 31.936 328.86 0 271.28 0c-61.607 0-58.093 94.933-71.76 108.6-22.747 22.747-49.615 66.447-68.76 83.4H32c-17.673 0-32 14.327-32 32v240c0 17.673 14.327 32 32 32h64c14.893 0 27.408-10.174 30.978-23.95 44.509 1.001 75.06 39.94 177.802 39.94 7.22 0 15.22.01 22.22.01 77.117 0 111.986-39.423 112.94-95.33 13.319-18.425 20.299-43.122 17.34-66.99 9.854-18.452 13.664-40.343 8.99-62.99zm-61.75 53.83c12.56 21.13 1.26 49.41-13.94 57.57 7.7 48.78-17.608 65.9-53.12 65.9h-37.82c-71.639 0-118.029-37.82-171.64-37.82V240h10.92c28.36 0 67.98-70.89 94.54-97.46 28.36-28.36 18.91-75.63 37.82-94.54 47.27 0 47.27 32.98 47.27 56.73 0 39.17-28.36 56.72-28.36 94.54h103.99c21.11 0 37.73 18.91 37.82 37.82.09 18.9-12.82 37.81-22.27 37.81 13.489 14.555 16.371 45.236-5.21 65.62zM88 432c0 13.255-10.745 24-24 24s-24-10.745-24-24 10.745-24 24-24 24 10.745 24 24z"></path></svg>
<!-- <i class="far fa-thumbs-up"></i> -->

IF you would like to still keep the icon tag you can set the option in a script tag in the header before you load the font awesome library

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

Output:

<i class="" data-fa-i2svg="">
<svg class="svg-inline--fa fa-thumbs-down fa-w-16" aria-hidden="true" data-prefix="fas" data-icon="thumbs-down" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" data-fa-i2svg=""><path fill="currentColor" d="M0 56v240c0 13.255 10.745 24 24 24h80c13.255 0 24-10.745 24-24V56c0-13.255-10.745-24-24-24H24C10.745 32 0 42.745 0 56zm40 200c0-13.255 10.745-24 24-24s24 10.745 24 24-10.745 24-24 24-24-10.745-24-24zm272 256c-20.183 0-29.485-39.293-33.931-57.795-5.206-21.666-10.589-44.07-25.393-58.902-32.469-32.524-49.503-73.967-89.117-113.111a11.98 11.98 0 0 1-3.558-8.521V59.901c0-6.541 5.243-11.878 11.783-11.998 15.831-.29 36.694-9.079 52.651-16.178C256.189 17.598 295.709.017 343.995 0h2.844c42.777 0 93.363.413 113.774 29.737 8.392 12.057 10.446 27.034 6.148 44.632 16.312 17.053 25.063 48.863 16.382 74.757 17.544 23.432 19.143 56.132 9.308 79.469l.11.11c11.893 11.949 19.523 31.259 19.439 49.197-.156 30.352-26.157 58.098-59.553 58.098H350.723C358.03 364.34 384 388.132 384 430.548 384 504 336 512 312 512z"></path></svg>
</i>

My selector is slightly different than what they recommend in the docs as it specifically locates the svg with data attribute data-fa-i2svg because if you choose to render the icon tag still the data attribute is also on the icon tag and will not trigger an icon update.

Resources:
Bootstrap Collapse
Jquery on method
font awesome changing icons : scroll up a little on this link after you get there, there wasn't a link for the changing icons but this link is the next section.

FA5 Toggle Icon on Collapse

1 Answers