sorting icons show behind header text with nowrap table class

Edward Knish

And yes, I know this has been addressed before but I have gone through every answer on this forum and elsewhere trying to fix it and I can't seem to get the icons to play nice. Debugger ticket reference is "arusar"

EDIT: if you look at the image I posted in the link at the bottom, it appears that two different icons are rendering and that the one that is showing up behind some of the column headers is the issue. The actual sort icon that changes works well, it's the duplicate in the back and I still can't figure out how to get rid of it.

Background:

I'm using MVC 5
I'm also using bootstrap (and yes, I have implemented the datatables.bootstrap css and scripts)
The only custom style I am using right now is used in a different view on a specific, user-defined class.

The table that is giving me issues is in a partial view ("UserDbGrid/_UserDbGrid") that is generated with @Render.Action:

<div class="container-fluid">
    <div class="row">

        <div class="col-sm-8">
            @{Html.RenderAction("UserDbGrid", "UsersDb", null);}
        </div>

        <div class="col-sm-4">
            @{Html.RenderAction("UserForm", "UsersDb", null);}
        </div>

    </div>
</div>

Right now, since the site is still in its infancy, the partial view renders a table that returns all users in the database [Using MongoDB]:

<table id="user-info-datatable" class="dataTable display nowrap">
    <thead>
        <tr>
            <th>@Html.LabelFor(x => x[0].firstName)</th>
            <th>@Html.LabelFor(x => x[0].lastName)</th>
            <th>@Html.LabelFor(x => x[0].contactInfo.email)</th>
            <th>@Html.LabelFor(x => x[0].alias)</th>
            <th>@Html.LabelFor(x => x[0].dateJoined)</th>
            <th>@Html.LabelFor(x => x[0].MongoID)</th>
        </tr>
    </thead>
    <tbody>

        @{ foreach (PLProjectDTOs.PersonDTO person in Model)
            {
                <tr>
                    <td>@Html.DisplayFor(j => person.firstName)</td>
                    <td>@Html.DisplayFor(j => person.lastName)</td>
                    <td>@Html.DisplayFor(j => person.contactInfo.email)</td>
                    <td>@Html.DisplayFor(j => person.alias)</td>
                    <td>@Html.DisplayFor(j => person.dateJoined)</td>
                    <td>@Html.DisplayFor(j => person.MongoID)</td>
                </tr>
            }
        }
    </tbody>
</table>

Here's the script for the table:

<script type="text/javascript">
    $(function () {

        $('#user-info-datatable').DataTable({

            "scrollX": true,

        });

    });
</script>

And here is what poops out:

http://i.imgur.com/7Yc7219.png

And here is the markup returned in chrome's debugger when i inspect one of the <th> elements:

<th class="sorting" tabindex="0" aria-controls="user-info-datatable" rowspan="1" colspan="1" style="width: 117.857px;" aria-label="Alias: activate to sort column ascending">

<label for="">Alias</label></th>

table.dataTable thead .sorting:after {
    opacity: 0.2;
    content: "\e150";
}
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 {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: block;
    font-family: 'Glyphicons Halflings';
    opacity: 0.5;
}
table.dataTable thead .sorting:after {
    opacity: 0.2;
    content: "\e150";
}
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 {
    position: absolute;
    bottom: 8px;
    right: 8px;
    display: block;
    font-family: 'Glyphicons Halflings';
    opacity: 0.5;
}
*:before, *:after {
    box-sizing: border-box;
}

Please help! So far I'm loving this plug-in but I cannot figure this one thing out. Does anyone have a solid work-around for this issue? So far I have tried all of these with no success:

http://stackoverflow.com/questions/8591953/how-can-i-force-the-jquery-datatables-header-sort-icon-to-the-far-right-or-far-l ---> Literally tried every single suggestion

https://github.com/DataTables/DataTables/issues/746 ----> Tried adding margins, padding, etc etc. No luck.

Removing all custom classes,

Adding a super specific custom class for this one table, no dice.

And others. Any suggestions for the latest iteration of the scripts / css would be very helpful!

Edward Knish

FIXED. Nevermind!

Spent 3 hours fighting with CSS and finally stumbled on a post that showed this same issue being resolved by deleting the default data-tables styling. Just deleted that and the min.css file and its looking pretty now.

I'll leave this question and answer up in case anyone else ends up having the same issue.

Here's the Stack Overflow post that solved it for me:
http://stackoverflow.com/questions/31690517/datatables-sort-icon-duplicating