- Edit the field by hovering over it and then click on the Edit Icon which will bring up the field settings panel.
-
Click on the "INPUT" tab from the settings panel.
- To add a PRE-ICON - Click on the pre-icon button under "Icon Before" settings or enter your icon CSS class name.
To add a POST-ICON - Click on the post-icon button under "Icon After" settings or enter your icon CSS class name.
- All available icons will now pop open. Select an icon or search for it and then select it.
- After selecting the pre or post icon it will be added to the field.
- To change a field's pre or post icon just repeat steps 3 and 4 above.
NEX-Forms Documentation
Documentation & Tutorials for NEX-Forms version 8.0 and above
Field Icons
With access to over 2000 built-in Font Awesome icons, you can seamlessly integrate pre and/or post icons into nearly all field types. This section will walk you through utilising icons to provide users with greater clarity as they fill out fields, ultimately adding a polished finishing touch to your form fields.
How to add/change a pre or post field icon
Pre & Post Icon Settings & Styling
This section will guide you on how to enhance your fields with icons and how to style them effectively.
| Icon settings definitions | ||
| Setting | Definition | Example |
| Icon selection | Sets the pre and/or post icon for the field as per the above article section. | |
| Icon class name | Used to set a custom icon class for your field icon. For example if you do not want to use one of the 1500+ Font Awesome icons already included in NEX-Forms then use your own CSS icon set. In this example we use CSS class "glyphicon glyphicon-cloud" to include a bootstrap icon from the boostrap icon CSS library. Make sure to include the library stylesheet in your theme to be able to use its CSS class definitions in any field's pre and post icons. | |
| Icon Size | Set the icon size. By default the icon sizes are 17px, in the example to the left the pre-icon size is 24px and post icon size is 14px. | |
| TX (Icon color) | Sets the icon color | |
| BG (Icon holder background color) | Sets the icon holder background color | |
| BRD (Icon holder border color) | Sets the icon holder border color | |
Removing icons from a field
- Edit your field and go to the field's INPUT -> ICON SETTINGS.
- Click on the pre or post icon selector.
- When the available icons pop opens click on "None"
Was this article helpful?
Still having trouble? How can we help you?
This article was last updated on 19 November 2024
Popular Articles
Stay in Touch
Get the latest NEX-Forms news and info by following us on:
In this article