Bootstrap 4 Sorting Icons Incorrect

thinkcube

Hello,

When I setup the a table based on the same exact files listed in the example here: https://datatables.net/examples/styling/bootstrap4.html

I noticed that the sorting icons are totally different and are incorrect compared to the example.

Here is my working example of the issue:
http://jsfiddle.net/nf5w7ceL/

They appear to be much thicker and bulkier than how they are in the official DataTables example.

What font library or asset is missing? I noticed when I click download on the example nothing is included in the archive except for CSS/JS.

Thank you!

thinkcube

After further debugging, I noticed it had to due with the font family not being set correctly. Since DataTables does not explicity set a font family or properties on the sorting icons, it defaults to the global/body configuration.

You can customize/correct this issue to match what's currently in the official documentation example by the following snippet which targets the before and after psuedo elements on the sorting classes.

table.dataTable thead .sorting:before, table.dataTable thead .sorting_asc:before, table.dataTable thead .sorting_desc:before, table.dataTable thead .sorting_asc_disabled:before, table.dataTable thead .sorting_desc_disabled:before,  {
  font-style: normal;
  -webkit-font-variant-ligatures: normal;
          font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 90%;
  line-height: 1.45em;
  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}

table.dataTable thead .sorting:after, table.dataTable thead .sorting_asc:after, table.dataTable thead .sorting_desc:after, table.dataTable thead .sorting_asc_disabled:after, table.dataTable thead .sorting_desc_disabled:after {
  font-style: normal;
  -webkit-font-variant-ligatures: normal;
          font-variant-ligatures: normal;
  font-variant-caps: normal;
  font-variant-numeric: normal;
  font-variant-east-asian: normal;
  font-weight: normal;
  font-stretch: normal;
  font-size: 90%;
  line-height: 1.45em;
  font-family: "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif;
}