Ngx-datatable header sorting icons

I’m submitting a … (check one with “x”)

[ ] bug report => search github for a similar issue or PR before submitting
[ ] feature request
[ ] support request => Please do not submit support request here, post on Stackoverflow or Gitter

Current behavior: Current behaviour in ngx-datatable as per below attached screenshot.

Expected behavior I tried a lot to override this because my expectation whould as per below attached screenshot for sorting Icons

Angular version: Angular 6
Browser: [all | Chrome XX | Firefox XX | IE XX | Safari XX | Mobile Chrome XX | Android X.X Web Browser | iOS XX Safari | iOS XX UIWebView | iOS XX WKWebView ]

Language: [all | TypeScript X.X | ES6/7 | ES5]

Issue Analytics

State:
Created 5 years ago
Comments:6

Top GitHub Comments

6reactions

lanxuexingcommented, Apr 18, 2019

try this one?

/deep/ .ngx-datatable{
    .sortable .sort-btn:before {
        font-family: data-table;
        content: "c";
    }
    .sortable .sort-btn.datatable-icon-down:before {
        content: "f";
    }
    .sortable .sort-btn.datatable-icon-up:before {
        content: "e";
    }
}

1reaction

WillHallcommented, Nov 16, 2018

I just overwrote the font settings, like so:

[data-icon]:before {
  font-family: "FontAwesome" !important;
  content: "";
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

[class^="datatable-icon-"]:before,
[class*=" datatable-icon-"]:before {
  font-family: "FontAwesome" !important;
  font-style: normal !important;
  font-weight: normal !important;
  font-variant: normal !important;
  text-transform: none !important;
  speak: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.datatable-icon-filter:before {
  content: "\f0b0";
}
.datatable-icon-collapse:before {
  content: "\f147";
}
.datatable-icon-expand:before {
  content: "\f196";
}
.datatable-icon-close:before {
  content: "\f2d3";
}
.datatable-icon-up:before {
  content: "\f0de";
}
.datatable-icon-down:before {
  content: "\f0dd";
}
.datatable-icon-sort:before {
  content: "\f0dc";
}
.datatable-icon-done:before {
  content: "\f00c";
}
.datatable-icon-done-all:before {
  content: "\f05d";
}
.datatable-icon-search:before {
  content: "\f002";
}
.datatable-icon-pin:before {
  content: "\f276";
}
.datatable-icon-add:before {
  content: "\f196";
}
.datatable-icon-left:before {
  content: "\f104";
}
.datatable-icon-right:before {
  content: "\f105";
}
.datatable-icon-skip:before {
  content: "\f101";
}
.datatable-icon-prev:before {
  content: "\f100";
}

if you change the font from fontawesome - you have to change the content to reflect what the new font uses.