Change Bootstrap Glyphicons Sort Arrow Color for Accessability

Davey Jones

I need to change the color of the sort icons, and I am using the bootstrap CSS for Datatables. I have copied out these CSS elements to modify:

table.dataTable thead .sorting_asc_disabled:after,
table.dataTable thead .sorting_desc_disabled:after {
    color: #eee;
}

table.dataTable thead .sorting:after {
  opacity: 0.2;
  content: "\e150";
  /* sort */
}
table.dataTable thead .sorting_asc:after {
  content: "\e155";
  /* sort-by-attributes */
}
table.dataTable thead .sorting_desc:after {
  content: "\e156";
  /* sort-by-attributes-alt */
}

However, when I view the source it looks like those elements, both in my CSS and in the dataTables.bootstrap.css are overridden by something, but I can't seem to find what it is that is overriding it. All I need is to make the icons darker against the light headers.

Davey Jones

If I change the content: "\e156" to another value it will change the icon, so these CSS elements do drive which icon is used, but when I add color:#000000 it doesn't change the color.

Joyrex

You need to ensure the copied CSS is included AFTER the includes for the CSS files for DataTables and Bootstrap - the last styles loaded are the ones applied (in most cases).

Also, you should be able to change the color of the glyphicons simply by putting color: in the rules since it's an icon font. You would add the color: attribute to CSS rules where the Gylphicon is being called via the content: rule: http://live.datatables.net/yabuzuqo/1/

Davey Jones

Thanks Joyrex. My CSS was included after datatables.bootstrap.css, and I cold change the actual icons from my CSS. I wasn't seeing the difference I needed because of the opacity attributes. Once I fiddled with those I was able to get the results I needed.

Thanks!