Tony in a BOX

FontAwesome is great, but after upgrade to 5, there are prefix types (far, fas, fab) added and then the way to render with SVG/JS to make its mess.  There are 2 types of use, but SVG/JS is way better in advance features to decorate the icons.

Not sure if it’s only me that seems the manual/instruction on how to manipulate the font awesome using SVG/JS does not work as promise. I have to figure it out myself.

So here is my solutions

This is jQuery toggle function to change from <i class=”fas fa-plus-circle”></i> to <i class=”fas fa-minus-circle”></i> icon

jQuery('.btn').on("click", function(){
   jQuery(this).find('[data-fa-i2svg]')
       .attr('data-prefix', 'fas');
    if (jQuery(this).find('[data-fa-i2svg]')
       .attr('data-icon') == 'minus-circle') {
         jQuery(this).find('[data-fa-i2svg]')
           .removeClass('fa-minus-circle')
           .addClass('fa-plus-circle')
           .attr('data-icon', 'plus-circle');
   }else{
         jQuery(this).find('[data-fa-i2svg]')
           .removeClass('fa-plus-circle')
           .addClass('fa-minus-circle')
           .attr('data-icon', 'minus-circle');
   }
});

Explanation:

1. There are 2 elements that shared ‘data-fa-i2svg’ attribute (<i> and <svg>)
2. You have to find the element with attribute ‘data-fa-i2svg’ then  add/remove class with original FontAwesome class which starts with fa-xxxxx.
3. Change the attribute ‘data-icon’ to the FontAwesome class (eliminate the fa- prefix)
4. Last thing, change the attribute ‘data-prefix'  to make it correct prefix type for each icon.