Bootstrap 3 - Change Sort Icons

TimothyV

Hi, I love the DataTables solution you folks have provided. Thank You!

I have a simple question. I would like to switch the column sort icons in https://datatables.net/examples/styling/bootstrap.html to be like the ones in https://datatables.net/examples/basic_init/zero_configuration.html except I would like them in black rather than purple. I have searched, yet cannot seem to figure it out. Can someone please assist me in this?

Thank you in advance, Timothy

colin

This thread might be useful - it's going in the opposite direct, replacing default with the Bootstrap icons - but it might give you a starting point.

Colin

TimothyV

Thanks, Colin. I actually came across this post before writing my question yet cannot figure out why it will not work so I hosted the base demo at https://jsfiddle.net/TimothyV/c62kL7oj/.

TimothyV

Do you know if the only change I need to make is in dataTables.bootstrap.min.css?

allan

Yes, the only change would be in dataTables.bootstrap.min.css (or some other file that overrides it).

The easiest change will probably be to update the icon that our stylesheet is using with an icon you prefer. glyphicon-menu-up for example?

Allan

TimothyV

Allan, once again thank you for your answer. Now I am just trying to figure out to make the sort images using https://datatables.net/examples/styling/bootstrap.html to look like the ones (black arrows) at https://datatables.net/examples/basic_init/zero_configuration.html but whatever I try does not work. The look of https://datatables.net/examples/styling/bootstrap.html is perfect and I only want to change the three sort icons.

https://datatables.net/examples/styling/bootstrap.html
table.dataTable thead .sorting:after{
opacity:0.2;
content:"\e150"
}
table.dataTable thead .sorting_asc:after{
content:"\e155"
}
table.dataTable thead .sorting_desc:after{
content:"\e156"
}

https://datatables.net/examples/basic_init/zero_configuration.html
table.dataTable.table thead th.sorting:after,table.dataTable.table thead td.sorting:after{
content:"\f0dc";
color:#ddd;
font-size:0.8em
}
table.dataTable.table thead th.sorting_asc:after,table.dataTable.table thead td.sorting_asc:after{
content:"\f0de"
}
table.dataTable.table thead th.sorting_desc:after,table.dataTable.table thead td.sorting_desc:after{
content:"\f0dd"
}

So now I am thinking perhaps I should use a relative url path to the images I downloaded. I searched the forum yet could not find anything on this. Is there perhaps an example to override sort_asc.png, sort_both.png and sort_desc.png using url('../../images/...') in the CSS? I value your time and certainly appreciate how helpful you have been.

allan

Yes, if you'd rather use png images rather than the icons built into Bootstrap 3, then the way to do it would be to completely override those styles.

This is the core CSS for DataTables styling sorting which you might be able to use as the basis for it - note that its SCSS there - it gets compiled down to CSS.

Allan

TimothyV

Allan, thank you. I will look into this further although I discovered that I loose the sort column images if I use the original downloaded files with no alterations yet host one of them (bootstrap.min.css) locally. Is this a known issue?

@*<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />*@
<link rel="stylesheet" type="text/css" href="../../bootstrap.min.css" />

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>

<script type="text/javascript">
    $(document).ready(function () {
        $('#example').DataTable();
    });
</script>

<table id="example" class="table table-striped table-bordered" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
        </tr>
        <tr>
            <td>Garrett Winters</td>
            <td>Accountant</td>
        </tr>
    </tbody>
</table>

https://jsfiddle.net/TimothyV/c62kL7oj/5/

There is no issue if I reference

<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />

in place of

<link rel="stylesheet" type="text/css" href="../../bootstrap.min.css" />

Can someone please help with this?

allan

although I discovered that I loose the sort column images if I use the original downloaded files with no alterations yet host one of them (bootstrap.min.css) locally. Is this a known issue?

Not so much an issue / bug as not expected to be used that way. They would need to be modified (and if you are using the SCSS also be compiled).

You'd need to take the bootstrap.css file (not the .min.css one, unless you want a real challenge!) and modify it to use the original icons.

The easier solution, if you aren't comfortable doing that, is to modify the bootstrap.css file to change which of the Bootstrap icons it refers to, to those which match your requirements a bit better as I suggested above.

Allan

TimothyV

Thanks Allan, perhaps I am missing something foundational but when I do not modify any files but simply reference the one (https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css) locally, the column sort icons change to an unrecognizable image.

@*<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />*@
<link rel="stylesheet" type="text/css" href="../../bootstrap.css" />

<link rel="stylesheet" href="https://cdn.datatables.net/1.10.20/css/dataTables.bootstrap.min.css" />

<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.20/js/dataTables.bootstrap.min.js"></script>

The sorting does continue to work, it's just that the sort image changes. Should I not be able to reference the https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css file locally with the prescribed column sort images showing?

allan

You can reference the CDN files (which are not local, unless you download them) and then override the CSS inside them using local CSS.

https://jsfiddle.net/p2rwy36k/

Allan

TimothyV

Allan,

Thank you so much for solving this issue for me. Also, I appreciate you sticking with me until it was complete. The CSS you provided at https://jsfiddle.net/p2rwy36k/ is the solution I needed.

Keep up the great work and have a great day!