NG2: Using font awesome icon in Data Grid Header

[huber]

In a Data Grid Column we are using in the property headerStyleClass for example the font awesome icon far fa-eye-slash, which is displayed fine in NG1, but does not display in N2.

Is there anything additionally needed in NG2 to use font awesome?

Servoy Developer Version: 2023.12.1.3923

Regards,

[mboegem]

Apart from the position, this works for me by just use 'far fa-eye-slash' in the header style class.
Something seems wrong, but can't tell based on the information you provided

[huber]

Hi Marc

They work perfectly fine in NG1, but not in NG2. The font awesome icon works in a row, but not in the header. Below the data grid and the properties set. The properties belong to the left most column (with checkboxes)

Regards,

[mboegem]

Hi Robert,

looks exactly the same as what I tested (which worked), the column is most likely a bit to narrow anyway.
Besides that, you really need to look in the browser's inspector in order to find out what is blocking the icon from showing.
Maybe some 'old' NG CSS that prevents it from showing correctly.

[huber]

Hi Marc

Thanks for the comparing with your property settings, removing the font-family property in the following selector solved the problem, i. e. the font-family "blocked" the displaying of the font awesome icon.

Code: Select all

.ag-table.ag-theme-bootstrap .ag-header-cell {
   border-right: none;
   color: #555;
   font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", "Segoe UI", sans-serif;
   padding-left: 0px;
}

Regards,