New in FOEX 3.1 – the FOEX Icon Button Plugin

The FOEX Icon Button plugin is built on top of Font Awesome/Font Apex and enables you to use more graphical elements.

This component has three state options – it can behave like a button that can be enabled, disabled or, when in read-only state, can behave as a GUI display element without any functionality.

FOEX Icon plugin

Icon size

There are 3 predefined options for the size of the icons – small, medium and large. These options coincide with the sizes of the icons in the regular FOEX buttons.

This was a deliberate decision that we took in order to provide a consistent UI that would fit into your current application’s theme.

If you require more control over the size of the button you can use the “Custom” scale option and define the size in pixels. This size is then used as the font-size CSS rule for the icon.

 

Icon color

You can set colors for both the enabled and disabled state. If you don’t set the active color, it will match the current theme’s color by default. The disabled color defaults to gray. Read-only state deactivates the icon by keeping its original color.

 

Tooltips

An enabled icon may show tooltips on mouse-over. These tooltips are not visible if the icon is disabled but they reappear if you enable it again. Read-only state has no tooltips. Once the icon is set to read-only state, it is not possible to switch it back to an “active” state.

If you wish to have this behaviour, set it to disabled (rather than to read-only) with the same disabled-color as it’s enabled state.

Badges

Similarly to the FOEX Button, the FOEX Icon Button plugin supports badges. The set up of the badges is exactly the same, you just need to use the correct Badge CSS classes.

This plugin comes with a set of dynamic actions that serve as setters for its attributes so each of the above-mentioned attribute can be set by using FOEX Icon Actions.

 

For some positioning tricks do not hesitate and visit the Icon plugin demo page.

Add your comment

Your email address will not be published. Required fields are marked *