Replacing original sorting icons with Bootstrap 4

koltzc

I am trying to figure out how to replace the original icons (up/down arrow). I added the following code which adds FontAwesome alternatives.

table.dataTable thead th {
    position: relative;
    background-image: none !important;
}
 
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute;
    top: 12px;
    right: 8px;
    display: block;
    font-family: FontAwesome;
}
table.dataTable thead th.sorting:after {
    content: "\f0dc";
    color: #ddd;
    font-size: 0.8em;
    padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
    content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
    content: "\f0dd";
}

Then in dataTables.bootstrap4.css, I modified this code to remove the original arrows but it doesn't.

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
  right: 1em;
  content: "\2191";
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  right: 0.5em;
  content: "\2193";
}

modified to

table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {

}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {

}

It still shows the original arrows. The only other css I am loading is buttons.dataTables.min.css but that doesn't have anything to do with the arrows from what I can see.

Thank you

koltzc

FIgured it out, I was missing the rel="stylesheet" when calling the stylesheet.

allan

Thanks for posting back - good to hear you got it working.

Allan

koltzc

I will just add this. If anybody is looking to do this, make sure you add this following to your CSS file as if you update Datatables, any changes you make will most likely be reverted back .

/* dataTables CSS modification & positioning */
table.dataTable thead .sorting:before,
table.dataTable thead .sorting_asc:before,
table.dataTable thead .sorting_desc:before,
table.dataTable thead .sorting_asc_disabled:before,
table.dataTable thead .sorting_desc_disabled:before {
  right: 0 !important;
  content: "" !important;
}
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after,
table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
  right: 0 !important;
  content: "" !important;
}

then, add your code underneath that CSS. Here is my code for example.

table.dataTable thead th {
    position: relative;
    background-image: none !important;
}
 
table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute !important;
    top: 12px !important;
    right: 8px !important;
    display: block !important;
    font-family: FontAwesome !important;
}
table.dataTable thead th.sorting:after {
    content: "\f0dc" !important;
    color: #ddd !important;
    font-size: 0.8em !important;
    padding-top: 0.12em !important;
}
table.dataTable thead th.sorting_asc:after {
    content: "\f0de" !important;
}
table.dataTable thead th.sorting_desc:after {
    content: "\f0dd" !important;
}