WPForms doesn’t come with option to add icons inside its fields. However, support for font awesome icons can be easily added using Field Icons for WPForms addon. Once you have installed and activated this addon then you can choose from 900+ font awesome icons.
It is also possible to style the font awesome icons by changing its settings like colors, padding, size.
How to Add Fontawesome Icons into WPForms Fields
- Once you have installed and activated ‘Styler for WPForms’ and ‘Field Icons for WPForms’ then open the page which has the form in which you want to add icons.
- Now open customizer on that page and click on ‘Styler for WPForms’ Panel.
- Here you will have to choose the form from the dropdown menu.
- Once you have selected the form then the page will automatically reload and show you Field Icons section. If the Field Icons section is missing then make sure that Field Icons for WPForms plugin is active.
- Now go to Field Icons section and you will be presented with the following design options
- Move Text Away from Icon: Once you add an icon inside a field then it will overlap with text. To move the text away from the icon so that they don’t overlap each other, you can use this option.
- Icon Size: If you want to increase or decrease the size of the icon then use this setting. You can also set different icon size for devices like phones, tablets and desktops.
- Move Icon Towards Bottom: If your icon is not centered ( it will usually appear toward to top when you add it for the first time ) then you can move it down using this setting.
- Move Icons Towards Right: When you will add the icon then it will be at the extreme left of the field. However, you can move it towards the right so as to leave some empty space between field border and icon. It can be done using this setting.
- Beneath these setting, you will see your form field and dropdown to select font awesome icons for them. Once you select an icon then it will automatically show you a live preview of how it looks and you can customize the design as explained in the above steps.
Once you have finalized your changes then click on the ‘Publish’ button to make them live.
If you need any assistance with the above steps then feel free to leave a comment and I will help you.