Replacing original sorting icons with Bootstrap 4
Replacing original sorting icons with Bootstrap 4
koltzc
Posts: 3Questions: 1Answers: 1
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
This question has an accepted answers - jump to answer
This discussion has been closed.
Answers
FIgured it out, I was missing the rel="stylesheet" when calling the stylesheet.
Thanks for posting back - good to hear you got it working.
Allan
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 .
then, add your code underneath that CSS. Here is my code for example.