Revert DataTables bootstrap sort arrows to original triangles

Question

Has anyone been figured out a way to replace the glyphicon sort arrows used by the bootstrap css styling for Datatable with the original up/down triangles without mangling the dataTable.bootstrap.css file? The accepted answer to basically the same question, jquery DataTables: weird sort arrows, was to discard bootstrap styling altogether.

The only way I've been able to do this so far is to comment out the relevant section of dataTable.bootstrap.css and add the original styles from dataTables.foundation.css to my own stylesheet. That is obviously not a great solution and definitely not best practices!

There was a discussion on this topic here two years ago, Change sort arrows to triangles - Tables #5209, but there was no agreement to change them back so we're left with the glyphicon ones, which I personally do not think are very visually appealing in the context of the DataTable header.

Any suggestions?

Answer 1

You should be able to do something like this:

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after {
    display:none;
}

table.dataTable thead .sorting_desc::after {
    display:none;
}

table.dataTable thead .sorting {
   background-image: url(https://datatables.net/media/images/sort_both.png);
   background-repeat: no-repeat;
   background-position: center right;
}

table.dataTable thead .sorting_asc {
   background-image: url(https://datatables.net/media/images/sort_asc.png);
   background-repeat: no-repeat;
   background-position: center right;
}

table.dataTable thead .sorting_desc {
   background-image: url(https://datatables.net/media/images/sort_desc.png);
   background-repeat: no-repeat;
   background-position: center right;
}

See this jsFiddle for demonstration.

---

You can also use other glyphs like shown below:

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after {
    content: "\e252";
}

table.dataTable thead .sorting_desc::after {
    content: "\e253";
}

See this jsFiddle for demonstration.

---

Also alternatively you can get rid of Bootstrap style altogether by using my original answer.