Friday 6th June, 2014

Font Awesome integration

Icon fonts, such as Font Awesome, can provide a huge number of graphical elements for a web-site in a bandwidth efficient manner. They do this by building on the foundations of regular font files and web browser's abilities to use web fonts. The information for each icon is stored in a vector form, so when the browser renders it, it will look pixel perfect at any size, on any device.

DataTables doesn't make use of a large number of icons, as the main layout of the table and data is defined by the CSS styling of the page, but it does use a few icons to help convey information to the end user:

In the header cells to indicate that a column can be sorted, or that is does have sorting currently applied to it.
Optionally in the pagination control the next and previous buttons can be shown graphically using icons.

In this post I'll describe how we can use Font Awesome to provide these graphical elements for DataTables, and present a complete integration file, which operates with the DataTables default stylesheet as well as the DataTables Bootstrap and Foundation styling integrations.

Sort icons

The default DataTables stylesheet makes use of background images to display the table's current sorting state to the end user. Three icons (sorting ascending, sorting descending and sortable) means three HTTP requests - using an icon font reduces this to a single request, speeding up the response time of your site (a sprite could also be used, although it has its own complexities).

To use Font Awesome provided icons, we can make use of the CSS :after pseudo-element. As a quick summary, each element displayed by the browser has empty before and after elements, which are normally hidden, but can be made visible for styling purposes - exactly what we want!

Consider the following CSS:

table.dataTable thead th {
    position: relative;
    background-image: none !important;
}

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

Line 1: Select the column header cells for the table to which we are going to apply our styling
Line 2: Set the position to relative so the :after pseudo-element can be positioned relative to it.
Line 3: Remove the default DataTables sorting image indicator
Lines 6-8: Select the :after pseudo-elements
Lines 9-12: Display the pseudo-element and position at the right of the header
Line 13: Set the font to be Font Awesome

Now all we need to do is tell the browser what icon from Font Awesome's list to use. We do this with the CSS content property.

table.dataTable thead th.sorting:after {
    content: "\f0dc";
    color: #ddd;
    font-size: 0.8em;
    padding-top: 0.12em;
}
table.dataTable thead th.sorting_asc:after {
    content: "\f0de";
}
table.dataTable thead th.sorting_desc:after {
    content: "\f0dd";
}

In this case, we apply the required icon code to the three sorting classes. Note also that the sorting available, but not activated, icons are made slightly smaller than the icons showing which columns the table is currently being ordered by.

Paging controls

As noted above, the other area where DataTables can make use of icons is in the paging controls. Rather than going into detail of the CSS required for that here, as the process is basically the same as above, see the full integration file below if you are interested in the workings of the paging icons with an icon font.

It is worth noting that the DataTables language options, such as language.paginate.next can be used to modify the strings next to the icons, or removing them completely (by setting them to be an empty string), leaving only the icon. Finally, the buttons shown for the paging input can be controlled by pagingType.

Full integration

The complete CSS file, proving Font Awesome integration for DataTables is available on the DataTables CDN:

CSS

The Font Awesome integration file for DataTables provides support for the default DataTables stylesheet, as well as the integration options for Bootstrap and Foundation.

To use it on your own pages, simply include the CSS file from the CDN as you would any other CSS file with a link tag, or copy the CSS to your own local files and modify to suit your needs (adding colour to the icons for example).

Examples

The following documents show the Font Awesome integration being used with a basic DataTable: