Replace Sort icons in Datatables 1.10 ( 2021)

alexk345

https://jsfiddle.net/alexk345/e4cuxybm/27/
I try to remove triangle icons with css. But somehow it left with one icon when i click columns.

Bascally using material css for better look. It has vertical arrows looks easier to see. But this triangle arrows(default) shows up along with material design

Also i might want to use fontawesome icons for sorting icons in future, so it can be independent of css frameworks.

Any idea. if you can fix that fiddle and show what i missed?

I search google and tried all permuation and combination of suggestions. Still Stuck

thanks.

colin

This thread should help, it's asking the same thing.

Cheers,

Colin

alexk345

I tried all that. Please look at fiddle page to see what i am talking about. I think its something our of order in my css loading i think or something else.

kthorngren

You have conflicting CSS. You are loading both jquery.dataTables.min.css and dataTables.material.css. jquery.dataTables.min.css is the standard Datatable styling which you don't want to use with a styling framework. See the Styling docs and this example (look at the CSS tab) for more details. Use the Download Builder to get the correct files.

Here is the updated example with jquery.dataTables.min.css removed.
https://jsfiddle.net/s5be8xyL/

Kevin

alexk345

I know something out of order but did not know what that was. solved now.
Thanks much.