Font Awesome 集成
诸如 Font Awesome 之类的图标字体可以为网站以高宽带效率提供大量图形元素。它们通过建立常规字体文件的基础和网络浏览器使用 网页字体 的能力来实现这一点。每个图标的信息都以矢量形式存储，因此当浏览器呈现图标时，该图标在任何设备上任何尺寸都将显得像素完美。
DataTables 没有使用大量图标，因为表和数据的主要布局由页面的 CSS 样式定义，但它确实使用一些图标来帮助向最终用户传达信息
- 在标题单元格中以表明某一列可以排序，或确实已对其应用了排序。
- 可以选择在分页控件中使用图标以图形方式显示下一个和上一个按钮。
在本文中，我将介绍如何使用 Font Awesome 为 DataTables 提供这些图形元素，并提供一个完整的集成文件，它适用于 DataTables 默认样式表以及 DataTables Bootstrap 和 Foundation 样式集成。
排序图标
默认的 DataTables 样式表使用背景图片向最终用户显示表的当前排序状态。三个图标（升序排列、降序排列和可排序）意味着三个 HTTP 请求 - 使用图标字体可将其减少到一个请求，从而加快站点的响应时间（也可以使用精灵图，尽管它有其自身的复杂性）。
要使用 Font Awesome 提供的图标，我们可以使用 CSS :after 伪元素。简单总结一下，浏览器显示的每个元素都有空 before 和 after 元素，这些元素通常是隐藏的，但可以出于样式目的使其可见 - 这正是我们想要的！
考虑以下 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;
}
- 第 1 行：选择我们将应用样式的表的列标题单元格
- 第 2 行：将位置设置为
relative以便:after伪元素可以相对于它进行定位。 - 第 3 行：删除默认的 DataTables 排序图像指示符
- 第 6-8 行：选择
:after伪元素 - 第 9-12 行：显示伪元素并定位在标题的右侧
- 第 13 行：将字体设置为 Font Awesome
现在我们需要做的是告诉浏览器要使用 Font Awesome 列表 中的哪个图标。我们使用 CSS content 属性 来执行此操作。
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";
}
在这种情况下，我们将所需的图标代码应用于三个排序类。另请注意，可用但未激活的图标比显示表当前通过哪些列排序的图标略小。
分页控件
如上所述，DataTables 可使用图标的另一个区域在于分页控件中。由于该过程基本上与以上相同，因此这里不再详细介绍该控件所需的 CSS，如果您对分页图标与图标字体的配合运作感兴趣，请参阅以下完整集成文件。
值得注意的是，DataTables 语言选项（例如 language.paginate.next）可用于修改图标旁边的字符串，或完全移除它们（通过将它们设置为一个空字符串），只保留图标。最后，分页输入中显示的按钮可由 pagingType 控制。
完整集成
完整 CSS 文件可在 DataTables CDN 上找到，提供 DataTables 的字体真棒集成
DataTables 的字体真棒集成文件为 DataTables 默认样式表提供支持，并提供 Bootstrap 和 Foundation 的集成选项。
如需在您自己的页面上使用它，只需从 CDN 引入 CSS 文件，就像使用带 link 标记的任何其他 CSS 文件一样，或将 CSS 复制到您自己的本地文件，并根据需要进行修改（例如，向图标添加颜色）。
示例
以下文档显示了在基本 DataTable 中使用字体真棒集成