table.tablesorter thead tr th.headerSortUp:after,
    table.tablesorter thead tr th.headerSortDown:after,
    table.tablesorter thead tr th.header:after {
      font-family: FontAwesome;
    }
    table.tablesorter thead tr th.header:after {
      content: "\f0dc";
    }
    table.tablesorter thead tr th.headerSortUp:after {
      content: "\f0de";
    }
    table.tablesorter thead tr th.headerSortDown:after {
      content: "\f0dd";
    }

<table id="table" class="table tablesorter">
    <thead>
        <tr>
            <th>Header 1</th>
            <th>Header 2</th>
            <th>Header 3</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Data 1</td>
        </tr>
        <tr>
            <td>Data 2</td>
        </tr>
        <tr>
            <td>Data 3</td>
        </tr>
    </tbody>
</table>

6 thoughts on “jQuery tablesorter with Font Awesome arrows”

1. I can’t thank you enough for sharing your code! You have saved me a lot of time, trying to sort this out! Many, many thanks! All the best!

   LikeLike

   Reply

2. Works like a charm! Thanks very much!

   LikeLike

   Reply

3. Thanks — had to refine further (color, positioning, size, hover and selected colors) but this got me on track to overcome my internal resistance!

   Here’s what I added:

   table.tablesorter thead tr th.header,
   table.tablesorter thead tr th.headerSortUp,
   table.tablesorter thead tr th.headerSortDown
   {
   background-image: none;
   }

   table.tablesorter thead tr th.headerSortUp:before,
   table.tablesorter thead tr th.headerSortDown:before,
   table.tablesorter thead tr th.header:before
   {
   font-size: [size x];
   line-height: [size x];
   }

   table.tablesorter thead tr th.header:hover,
   table.tablesorter thead tr th.headerSortUp:hover,
   table.tablesorter thead tr th.headerSortDown:hover,
   table.tablesorter thead tr th.header:hover p,
   table.tablesorter thead tr th.headerSortUp:hover p,
   table.tablesorter thead tr th.headerSortDown:hover p,
   table.tablesorter thead tr th.header:hover:before,
   table.tablesorter thead tr th.headerSortUp:hover:before,
   table.tablesorter thead tr th.headerSortDown:hover:before
   {
   color: [hover color];
   }

   table.tablesorter thead tr th.headerSortUp p,
   table.tablesorter thead tr th.headerSortDown p,
   table.tablesorter thead tr th.headerSortUp:before,
   table.tablesorter thead tr th.headerSortDown:before
   {
   color: [active color];
   }

   LikeLike

   Reply

   • I’m glad it helped 🙂 Thanks for posting your css tweaks!

     LikeLike

     Reply

4. thank you!

   LikeLike

   Reply

5. Thanks very much! Lifesaver 🙂

   My +1 is to include a little padding-left

   table.tablesorter thead tr th.headerSortUp:after,
   table.tablesorter thead tr th.headerSortDown:after,
   table.tablesorter thead tr th.header:after {
   font-family: FontAwesome;
   padding-left: 0.25rem;
   }

   LikeLike

   Reply