Strange behaviour of cssIcon(s)

[Revover]

Hi,

I'm puzzled by cssIcon behaviour. The tablesorter works fine, but it seems the classes behave in a strange way. Consider this code:

 $("table").tablesorter({
    sortList : [[1,0]],

    headerTemplate : '{content}{icon}',
    cssIcon: 'fas fa-sort',
    cssIconAsc: 'fas fa-sort-up',
    cssIconDesc: 'fas fa-sort-down',
    onRenderHeader: function(index) {
      $(this).find('div').addClass('d-flex align-items-center');        
    },
  });

What I get on load is this:

<i class="fa-sort tablesorter-icon"></i>

And where I click sort I get this:

<i class="fa-sort tablesorter-icon fas fa-sort-down"></i>

I seems like only the last class from cssIcon proprerty was actually used. I'd expect all to be in the class of the i element. Also, maybe I don't get how is this supposed to work, but shouldn't cssIconAsc and cssIconDesc replace the class(es) from cssIcon property?

[Mottie]

Hi @Revover!

Sorry for taking so long to respond!

Try only including the css class names that change in the options (remove 'fas' from cssIconAsc and cssIconDesc):

cssIcon: 'fas fa-sort',
cssIconAsc: 'fa-sort-up',
cssIconDesc: 'fa-sort-down',