I realize there were similar questions to this where the problem was the correct font family not being referenced. However, in the version I am using, they don't use an icon for the navigation arrows, they use the html character code for the double-left and double-right arrows.

My html references -

<link href=Content/css/bootstrap.css rel=stylesheet />

<link href=Content/css/datepicker.css rel=stylesheet />

<link href=Content/css/navbar.css rel=stylesheet />

<link href=Content/css/jquery-ui.min.css rel=stylesheet />

<link href=Content/css/jquery-ui.structure.min.css rel=stylesheet />

<link href=Content/css/jquery-ui.theme.min.css rel=stylesheet />



<script type= text/javascript src=Scripts/jquery-2.2.0.min.js></script>

<script type= text/javascript src=Scripts/bootstrap.min.js></script>

<script type= text/javascript src=Scripts/bootstrap-datepicker.js></script>

<script type= text/javascript src=Scripts/moment.min.js></script>

<script type= text/javascript src=Scripts/jquery-ui.min.js></script>





<script type=text/javascript>

    $(document).ready(function () {

        $(.datepicker).datepicker({

            format: 'dd/mm/yyyy',

            autoclose: true,

            todayBtn: 'linked',

            useCurrent: true,

            ignoreReadonly: true

        })

    });

</script>

Here is the relevant coding from the bootstrap-datepicker.js file -

    headTemplate: '<thead>'+

                      '<tr>'+

                        '<th colspan=7 class=datepicker-title></th>'+

                      '</tr>'+

                        '<tr>'+

                            '<th class=prev>&laquo;</th>'+

                            '<th colspan=5 class=datepicker-switch></th>'+

                            '<th class=next>&raquo;</th>'+

                        '</tr>'+

                    '</thead>',

    contTemplate: '<tbody><tr><td colspan=7></td></tr></tbody>',

    footTemplate: '<tfoot>'+

                        '<tr>'+

                            '<th colspan=7 class=today></th>'+

                        '</tr>'+

                        '<tr>'+

                            '<th colspan=7 class=clear></th>'+

                        '</tr>'+

                    '</tfoot>'

};

All I am getting is the same grey as the general header background, and then the normal blue hover-over as I would for any particular day on the calendar.

I looked for conflicting .prev definitions in the other .css files, but didn't see any specific to tables, datepicker or headers. I have also tried substituting coding using the glyphicons, same result.

My jfiddle -

JFiddle Coding samples