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

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

CharleyCharley Posts: 66Questions: 17Answers: 0

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

This question has an accepted answers - jump to answer

Answers

  • allanallan Posts: 63,237Questions: 1Answers: 10,418 Site admin
    edited August 2023 Answer ✓

    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

  • CharleyCharley Posts: 66Questions: 17Answers: 0

    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 )

  • CharleyCharley Posts: 66Questions: 17Answers: 0
    edited August 2023

    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";
    }
    
  • CharleyCharley Posts: 66Questions: 17Answers: 0

    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

  • allanallan Posts: 63,237Questions: 1Answers: 10,418 Site admin

    Nice one! Thanks for this.

    Allan

Sign In or Register to comment.