You tried using headerStyleClass I guess. And that maps to whole th and font-awsome classes don't work as expected on that element in extra-table.
You should
create a feature request for supporting this nicely in extra-table.
You could also hack this in via solution css/less but it's ugly (basically targets the correct div and copies the actual style from inside the font-awsome classes). For example if you would set in headerStyleClass of a column in properties view "extraTableHeader-fa-arrow-circle-left" and you'd add something like this to solution .less/css file, it would work:
- Code: Select all
// Hacks for putting font-awsome icons in extra-table column header; basically we copy the styles of classes "fas" and the actual icon class (from font-awsome 5 generated "all.css") into
// a selector that matches on the given column header text div"; it would be nicer to use .less extends api to extend those classes but those are
// not in a .less file so it doesn't' work'; but this should be handled better inside the extra-table component to allow ppl. to just set icon class
// directly on the column definition in properties view
.extraTableHeader-fa-arrow-circle-left div div .table-servoyextra-header-label:before {
content: "\f0a8";
}
.extraTableHeader-fa-arrow-circle-left div div .table-servoyextra-header-label {
font-family: 'Font Awesome 5 Free';
font-weight: 900;
}
But as I said, please file a feature request for this - to make it nice.