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

概要

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
  }
}

参考

• Provide Font Awesome integration option #165
• Font Awesome integration