jQuery tablesorter with Font Awesome arrows

I needed to add font awesome arrows to a jQuery.tablesorter table.  The css was a bit tricky and I don’t want to lose it.

    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>

5 thoughts on “jQuery tablesorter with Font Awesome arrows

  1. 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];
    }

    Like

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s