Bootstrap Components Button Property

Classic Servoy
1

Hi,

is there anybody who can tell me the meaning and differences of the Button WebComponent Properties imageStyleClass and styleClass?

[attachment=0]webcomponent_property.png[/attachment]

Thank you in advance.

webcomponent_property.png
webcomponent_property.png427×153 18.2 KB

2

Hi,

the styleClass property is used to assign 1 or more class to the button to control it’s overall style e.g. “btn btn-primary”.
the imageStyleClass instead it can be used to show an icon as a Font Icon; e.g. “fas fa-search”
Make sure the NG Service Font Awesome is installed via the Web Package Manager; you can therefore make use of the Font Awesome Icons Find Icons with the Perfect Look & Feel | Font Awesome

Regards,
Paolo

1079×746 38.7 KB

3

Hi Paolo,

thank you for explaining me this Component style classes.

I have installed the Font Awesome package and I’m calling the service “plugins.fontawesomeLib.load()” with my onOpenSolution.
But how do I get the Font Awesome Icon on the button?
Only setting e.g. “fas fa-plus” as value for the imageStyleClass is not working.
Do I have to create a style for the icons I want in my css stylesheet? If yes, how?

Thank you in advance.
Best regards

4

Hi,

if the Font Awesome in installed for your NG Solution (or any of it’s module) there is nothing else to be done.
If the icon doesn’t show for you, the only reasons i can think of is:

  • the button may be too small and the icon doesn’t fit ?
  • there may be some conflicts with other versions of the Font Awesome library from older web packages; other components used to reference Font Awesome v 4.x in the past, in the latest packages this dependancy has been moved out since the Font Awesome library can be installed separately (as you did). Try these values to check if it makes any difference “fa fa-search” (v 4.x syntax) or “fas fa-search” (v 5.x syntax).

Regards,
Paolo