Fontawesome 6 + bootstrap 5 with dataTables.fontAwesome.css doesn't seem to be working anymore

Charley

css/js

jquery ui 1.13.2
fontawesome free 6.4
bootstrap 5.4 bundle, themed.
datatables 1.13.6 with bootstrap 5 styling
jquery 3.7
https://cdn.datatables.net/plug-ins/1.13.6/integration/font-awesome/dataTables.fontAwesome.css

the styles in dataTables.fontAwesome.css seem to mostly be ignored.

https://www.dropbox.com/scl/fi/reqw98veuhmi91c2ff28l/DataTableTest.zip?rlkey=q48r6n28s6edgfu7mtjy6kbug&dl=0

allan

Since DataTables uses UTF8 icons for the sort icon indicators these days, I feel the Font Awesome integration doesn't really add all that much. However, if you do want it for styling consistency, it is a lot easier than it used to be:

table.dataTable thead th.sorting:before,
table.dataTable thead th.sorting:after {
    top: 15px !important;
    font-family: FontAwesome;
}

table.dataTable thead th.sorting:before {
    content: "\f0de" !important;
}
table.dataTable thead th.sorting:after {
    content: "\f0dd" !important;
}

Live example: https://live.datatables.net/lihexuce/1/edit .

Allan

Charley

we are still using iso-8859-1 rather than utf-8 for a number of reasons that I won't go into at the moment. So this does straighten it out.

I kind of dislike using !important when I can avoid it, so I may wind up fiddling a bit more (I think the issue is the more specific tags in the current datatables css )

Charley

looks like this might do it without the !important tag

table.dataTable thead > tr > th.sorting:before, 
table.dataTable thead > tr > th.sorting:after, 
table.dataTable thead > tr > th.sorting_asc:before, 
table.dataTable thead > tr > th.sorting_asc:after, 
table.dataTable thead > tr > th.sorting_desc:before, 
table.dataTable thead > tr > th.sorting_desc:after, 
table.dataTable thead > tr > th.sorting_asc_disabled:before, 
table.dataTable thead > tr > th.sorting_asc_disabled:after, 
table.dataTable thead > tr > th.sorting_desc_disabled:before, 
table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
    top: 15px;
    font-family: FontAwesome;
}

table.dataTable thead > tr > th.sorting:before,
table.dataTable thead > tr > th.sorting_asc:before,
table.dataTable thead > tr > th.sorting_desc:before,
table.dataTable thead > tr > th.sorting_asc_disabled:before,
table.dataTable thead > tr > th.sorting_desc_disabled:before,
table.dataTable thead > tr > td.sorting:before,
table.dataTable thead > tr > td.sorting_asc:before,
table.dataTable thead > tr > td.sorting_desc:before,
table.dataTable thead > tr > td.sorting_asc_disabled:before,
table.dataTable thead > tr > td.sorting_desc_disabled:before{
    content: "\f0de" ;
} 
 
table.dataTable thead > tr > th.sorting:after,
table.dataTable thead > tr > th.sorting_asc:after, 
table.dataTable thead > tr > th.sorting_desc:after, 
table.dataTable thead > tr > th.sorting_asc_disabled:after, 
table.dataTable thead > tr > th.sorting_desc_disabled:after,
table.dataTable thead > tr > td.sorting:after,
table.dataTable thead > tr > td.sorting_asc:after,
table.dataTable thead > tr > td.sorting_desc:after,
table.dataTable thead > tr > td.sorting_asc_disabled:after,
table.dataTable thead > tr > td.sorting_desc_disabled:after {
    content: "\f0dd";
}

Charley

https://www.dropbox.com/scl/fi/mxdbnvz5l0p2s68bi718y/dataTables.fontAwesome.css?rlkey=kgh73x7hj7k8i725p6c285buc&dl=0

this includes the pagination stuff from the original with the updated sorting styles above, if anyone is interested in it they are welcome to use it

allan

Nice one! Thanks for this.

Allan