How to change Jquery datatable sort icon color

Question

Jquery Datatables sort icon is not properly visible, So how to change color of the sort icon, I want to change the color to black

Answer 1

The sort icon which you mention in the Datatables is not a icon.. It is a image, asc image and desc image. Hence you cannot change the color. But we can replace the image by another of your choice (similar image with your required color).

The image is set into the th by css

For sort asceding

table.dataTable thead .sorting_asc {
    background-image: url(../images/sort_asc.png);
}

For sort descending

table.dataTable thead .sorting_desc {
    background-image: url(../images/sort_desc.png);
}

You can overwrite this rule by your custom CSS.

#YourTableID thead .sorting_asc {
        background-image: url(../yourImage.png);
    }

same goes for desc image.. Hope this helps

---

Here is a working example

$(document).ready(function() {
  $('#example').dataTable();
});

#example thead .sorting_asc {
  background-image: url(http://www.miankoutu.com/uploadfiles/2015-9-24/2015924141740312.png);
  background-size: 20px 20px;
}
#example thead .sorting_desc {
  background-image: url(http://www.miankoutu.com/uploadfiles/2015-9-24/2015924141733340.png);
  background-size: 20px 20px;
}
#example .sorting {
  background-image: url(https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Sort_both.svg/1000px-Sort_both.svg.png);
  background-size: 20px 10px;
}

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">

<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>

<table cellpadding="0" cellspacing="0" border="0" class="dataTable" id="example">
  <thead>
    <tr>
      <th>Engine</th>
      <th>Browser</th>
      <th>Platform</th>
      <th>version</th>
      <th>grade</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 4.0</td>
      <td>Win 95+</td>
      <td>4</td>
      <td>X</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.0</td>
      <td>Win 95+</td>
      <td>5</td>
      <td>C</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 5.5</td>
      <td>Win 95+</td>
      <td>5.5</td>
      <td>A</td>
    </tr>
    <tr>
      <td>Trident</td>
      <td>Internet Explorer 6</td>
      <td>Win 98+</td>
      <td>6</td>
      <td>A</td>
    </tr>
  </tbody>
</table>