Language Options with Font-Awesome

Put Icons as the Language Setting

It should further be noted, that by using the language options, you can add in font-awesome icons into elements like pagination. Some .css adjustments need to be made, but I just finished testing this method and works great for my project.

DataTable Initialization

When using the dataTables.bootstrap.js, I created a script to initialize the defaults for all dataTables created within my project that runs after the bootstrap integration and font-awesome integration that changes the language options to clear the text and use font-awesome icons.

jQuery(document).ready(function ($) {
    "use strict";
    $(function () {

        //  INITIALIZE DATATABLES DEFAULT SETTINGS
        $.extend(true, $.fn.dataTable.defaults, {
            'destroy': true,
            'paging': true,
            'info': true,
            'searching': true,
            'ordering': true,
            'orderMulti': true,
            'autoWidth': true,
            'pageLength': 20,
            'processing': true,
            'pagingType': 'full_numbers',
            'language': {
                'paginate': {
                    'first': '<i class="fa fa-chevron-left"></i><i class="fa fa-chevron-left"></i>',
                    'last': '<i class="fa fa-chevron-right"></i><i class="fa fa-chevron-right"></i>',
                    'previous': '<i class="fa fa-chevron-left"></i>',
                    'next': '<i class="fa fa-chevron-right"></i>'
                }
            }
        });
    }); // Document Ready
}); // jQuery Ready

Alternatives Using Stylesheets

Of course, this is not the only way to accomplish. While using the dataTables.fontAwesome.css stylesheet, the same thing could have been done by using the methods in the stylesheet with content as it was with the sorting icons. I personally chose to just use the original method in the dataTables.fontAwesome.css for my sorting design.

table.dataTable thead th.sorting:after,
table.dataTable thead th.sorting_asc:after,
table.dataTable thead th.sorting_desc:after {
    position: absolute;
    right: 8px;
    line-height: normal;
    display: block;
    font-family: FontAwesome;
}

table.dataTable thead th.sorting:after {
    content: "\f0dc";
    color: @twilight;
}
table.dataTable thead th.sorting_asc:after {
    content: "\f0de";
    color: @brand-primary;
}
table.dataTable thead th.sorting_desc:after {
    content: "\f0dd";
    color: @brand-primary;
}

Just wanted to throw this bit of info out there incase it was not already previously mentioned before.

Contact me for questions or suggestions.

Thanks!

Review the examples for dataTables.bootstrap.js and dataTables.fontAwesome.css, along with the Font Awesome pagination and sorting snippets in the issue. Before making changes, determine whether the project wants to support or document this approach; done would require a maintainer-approved scope and corresponding examples or integration changes.