Replace Sort Icons in Datatable 2.07
Replace Sort Icons in Datatable 2.07
![TerraX3000](https://secure.gravatar.com/avatar/5d918073ceb5d8a53a2a34f50f45d321/?default=https%3A%2F%2Fvanillicon.com%2F5d918073ceb5d8a53a2a34f50f45d321_200.png&rating=g&size=120)
Link to test case: https://live.datatables.net/nixucome/4/edit
Description of problem:
My test case is using alternative arrow sorting icons based on Material UI icons: https://live.datatables.net/nixucome/4/edit
The arrow icons are working but the default triangle icons are still present. How do I remove the default sorting icons?
I'm using a very minimal Datatables 2.07 configuration. Also, I'm importing JQuery separately. My goal was to avoid conflicting CSS issues as reported by this user here:
https://datatables.net/forums/discussion/comment/200401/#Comment_200401
Note: In this test case, I'm not trying to use the Datatables Material Design Tech Preview as described here: https://datatables.net/examples/styling/material.html
I have tried the Material Design Tech Preview but it didn't display any sorting arrows. I'm hoping I can stick with the baseline Datatables configuration and tweak the styles for the sorting arrows but I'm open to the Material Design approach if it will be supported and if sorting arrows can be included.
This question has accepted answers - jump to:
Answers
Another poster had provided their CSS to replace the sorting icons:
https://datatables.net/forums/discussion/40100/replacing-original-sorting-icons-with-bootstrap-4
Their approach did not work for me. I updated their CSS to work with the new class names for 2.0.7 and added a new test case: https://live.datatables.net/nixucome/5/edit
FYI for anyone wondering, here is my summary of the changes to the sorting class names in version 2.0.7:
Description : Old Class Names
Unsorted column : sorting
Sorted Ascending : sorting sorting_asc
Sorted Descending: sorting sorting_desc
Description : New Class Names
Unsorted column : dt-orderable-asc dt-orderable-desc
Sorted Ascending : dt-orderable-asc dt-orderable-desc dt-ordering-asc
Sorted Descending : dt-orderable-asc dt-orderable-desc dt-ordering-desc
I use Font Awesome for the sort icons. It is not perfect, but works for me.
I use 1 font awesome icon (fa-solid fa-sort which is \f0dc)for the up/down arrows instead of 2 displaying in the css after.
Then a totally different icon for the column being sorted.
Ascending --> fa-solid fa-arrow-up-wide-short which is \f161
Descending --> fa-solid fa-arrow-down-wide-short which is \f160
Wooly65 - thank you very much! I've created test cases for your Font Awesome approach as well as my Material UI Icon approach.
Font Awesome: https://live.datatables.net/nixucome/10/edit
Material UI Icon: https://live.datatables.net/nixucome/9/edit
The Material UI example includes some hover effects. Providing the stylesheets and scripts below for reference:
<link href="https://cdn.datatables.net/v/dt/dt-2.0.7/datatables.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>
<script src="https://cdn.datatables.net/v/dt/dt-2.0.7/datatables.min.js"></script>
I created one more version which applies the Roboto font and hides the sort icons unless the column is sorted or the pointer hovers over the column.
See example here: https://live.datatables.net/nixucome/11/edit
Is there an example of using custom icons like ico files ?