Replacing original sorting icons with Bootstrap 4

Replacing original sorting icons with Bootstrap 4

koltzckoltzc 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

Answers

  • koltzckoltzc Posts: 3Questions: 1Answers: 1
    Answer ✓

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

  • allanallan Posts: 62,085Questions: 1Answers: 10,180 Site admin

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

    Allan

  • koltzckoltzc Posts: 3Questions: 1Answers: 1
    edited January 2017

    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;
    }
    
This discussion has been closed.