Bootstrap 3 - Change Sort Icons

Bootstrap 3 - Change Sort Icons

TimothyVTimothyV Posts: 34Questions: 7Answers: 0

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

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,094Questions: 1Answers: 2,581

    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

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    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/.

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

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

  • allanallan Posts: 60,984Questions: 1Answers: 9,944 Site admin
    Answer ✓

    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

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    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.

  • allanallan Posts: 60,984Questions: 1Answers: 9,944 Site admin

    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

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    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?

  • allanallan Posts: 60,984Questions: 1Answers: 9,944 Site admin

    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

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0
    edited January 2020

    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?

  • allanallan Posts: 60,984Questions: 1Answers: 9,944 Site admin
    Answer ✓

    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

  • TimothyVTimothyV Posts: 34Questions: 7Answers: 0

    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!

This discussion has been closed.