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,
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
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,
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.
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.
.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,
Hi
In 2024.3.0 -releaseNumber 3943 we observe a problem in data grid headers headerStyleClass-Property. When adding a font awesome icon class, it is not displayed in NGTitanium.
See attached solution (very simple, no database server needed, just one form).
Any help appreciated!
Best regards
Birgit
FontAwesomeTest.servoy (5.97 KB)
Does anyone notice same behaviour?
Thank you and regards
Birgit
Hello Birgit,
For me I have the same issues in version 2024.3.2.
What I noticed is that it is using Font Awesome 6 free even in our Servoy Packages it is version 5.14.1
I made a sample Solution myself as well with the following results. Sample solution is attached.
NG1
[attachment=2]Screenshot 2024-05-24 100538.png[/attachment]
Ti(NG)
[attachment=1]Screenshot 2024-05-24 100604.png[/attachment]
What I noticed was that on the button it looks good and you can use Fa version 5 names as well version 6 names.
Still I didn’t find any solution yet.
John
sample_font_awesome.servoy (115 KB)
Dear John
Thank you for the reply. And the confirmation of the issue. I also noticed the difference in the FA versions. I’ll open a ticket in the support system.
Best regards
Birgit
New week to debug this issue.
What I found out is that the Pseudo-element ::before is missing in the header.
My suspicion is that this is the cause of not showing the font awesome icon.
NG1
[attachment=1]Screenshot 2024-05-27 142053.png[/attachment]
NG2
[attachment=0]Screenshot 2024-05-27 142552.png[/attachment]
Kind regards,
John
Hi,
showing a font icon in NG Grid header is indeed not trivial for TiNG.
The :before element created by FA is overruled by the grid’s separator, which is also using the :before
From ag-grid.css
.ag-header-cell::before,
.ag-header-group-cell:not(.ag-header-span-height.ag-header-group-cell-no-group)::before {
content: "";
position: absolute;
z-index: 1;
display: var(--ag-header-column-separator-display);
width: var(--ag-header-column-separator-width);
height: var(--ag-header-column-separator-height);
top: calc(50% - var(--ag-header-column-separator-height) * 0.5);
background-color: var(--ag-header-column-separator-color);
}
One way to show the icon is to target an inner element of the header, example:
.ag-header-cell.fa-plus .ag-header-cell-text::before {
font-family: 'Font Awesome 6 Free';
font-weight: 900;
content: "+";
}
I have created a ticket in our support ticket to further investigate if there can be a simpler way to show an icon in the column header of the Grids.
https://servoy-cloud.atlassian.net/browse/SVYX-891
Regards,
Paolo
Thank you Paolo!
This helped me with showing the Font Awesome Icons in the header
Thanks Paolo
Your idea helped me too. I use the selector .fa-eye-slash .ag-header-cell-text::before, seems to be enough. I set the headerStyleClass: fa-eye-slash
Of course it’s modified for the closed eye instead of the plus (+).
Regards,
Hi Paulo
I have some more problems with using font awesome icons in Data Grid headers. For example, for showing the sort icon on a column, we use instead of the default icon the font awesome icon caret-up/caret-down. The two CSS corresponding selectors are:
.ag-theme-alpine .ag-icon-asc:before {
color: #737b82;
content: '\f0d8';
font-family: var(--fa-style-family, "Font Awesome 6 Free");
}
.ag-theme-alpine .ag-icon-desc:before {
color: #737b82;
content: '\f0d7';
font-family: var(--fa-style-family, "Font Awesome 6 Free");
}
This worked fine in every Browser for NG1. In NG2, it only works in Safari.
Strange thing is, if I use instead of content ‘\f0d7’ the content ‘\f007’ (user icon), it is shown correctly (of course, it’s in my case not useful, just to show that some icons are displayed). Both icons are in the Font Awesome 6 Free category.
What’s going on here?
Regards,
[attachment=0]caret-down shown in Chrome.png[/attachment]
[attachment=1]user shown in Chrome.png[/attachment]
Hi Robert,
the icons used in NG Grids ( including sort icons ) are configurable using the NG Grid icon config.
Is a preferable approach compared to force a content with CSS.
Example:
// set up grid icons
var icons = plugins.ngDataGrid.createIconConfig();
icons.iconSortAscending = "far fa-long-arrow-up";
icons.iconSortDescending = "far fa-long-arrow-down";
icons.iconCheckboxChecked = "far fa-check-square";
icons.iconCheckboxUnchecked = "far fa-square";
icons.iconCheckboxIndeterminate = "far fa-minus";
icons.iconEditorChecked = "far fa-check-square";
icons.iconEditorUnchecked = "far fa-square";
....
plugins.ngDataGrid.iconConfig = icons;
The ngDataGrid plugin allow you to configure globally all grids of your solution ( is installable from Web Package Manager, tab Services )
Regards,
Paolo
Hi Paulo
Again, thank you very much for the code, it works in all browsers now
I now have only one last challenge with the DBTreeview (Servoy Extra Component), which also works with my current CSS styles in Safari only, but no more in the other browsers (in NG2).
Is there a similar general possibility to style the expand/collapse triangles of the DBTreeview?
My current selectors which work in NG1 for all browsers are:
/*__________ DBTREEVIEW __________
*/
tree-node-expander {
padding-top: 1px;
padding-left: 6px;
width: 15px;
}
.toggle-children {
display: none;
}
.toggle-children-wrapper-collapsed, .toggle-children-wrapper-expanded {
color: #737b82; /* Pantone 431 */
font-family: var(--fa-style-family, "Font Awesome 6 Free");
font-size: 14px;
visibility: visible !important;
color: red;
}
.toggle-children .toggle-children-wrapper-collapsed::after {
content: "\f0da";
}
.toggle-children .toggle-children-wrapper-expanded::after {
content: 'fas fa-caret-down';
}
Thanks in advance