jQuery
DataTables

DataTables のソートアイコンを Font Awesome に置き換える

More than 3 years have passed since last update.


概要

DataTables のソートアイコンはデフォルトでは画像なので、色や大きさなどの調整が困難です。

そのため Font Awesome のアイコンで置き換えたいと思います。

最初は色々と試行錯誤していましたが、ちゃんと 公式の GitHub の issues を漁ったら参考記事にたどり着きました。


方法


datatables_overrides.css.scss

table.dataTable thead th {

// ソートの矢印の画像を FontAwesome のアイコンに置き換える。
position: relative;
background-image: none !important;

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

&.sorting:after {
content: '\f0dc'; // fa-sort
font-size: 0.8em;
padding-top: 0.12em;
}
&.sorting_asc:after {
content: '\f0de'; // fa-sort-asc
}
&.sorting_desc:after {
content: '\f0dd'; // fa-sort-desc
}
}



参考