Introduction

Gravity Forms doesn’t have inbuilt support for any type of icons at all so if you want to add the icons then you can use the Field Icons addon. This add-on comes with multiple options to customize the design of icons like color, size, padding, etc. It has support for 900+ icons and you can use your own images as icons as well. In this article, you will learn how to use the Field icons addon.

You can not only add icons to input fields but also to field labels.

Installation Guide

Field Icons is an addon of Gravity Booster. Before we start this step-by-step tutorial you should install both Gravity Booster and Field Icons.

Steps to install the free Gravity Booster plugin

• Login into your WordPress website.
• Go to Plugins -> Add New and then search for Gravity Booster.
• Install and activate the plugin.

Steps to install Field Icons Addon

• Purchase the Field Icons addon by clicking here.
• Login into your WPMonks account by entering your credentials here.
• Click on the View Details and Downloads link. Here scroll down to the bottom and then click on the link under Field Icons for Gravity Forms.
• Now login into your website backend and then click on Plugins -> Add New.
• Click on the Upload plugin and then Choose File button. 
• Now locate the zip file you downloaded earlier and then click on install now.
• After installation, click on the activate button.

Steps to add a license key for Field Icons Addon

• Login into your WPMonks account and then click on the ‘View Details and Downloads’ button. 
• Copy your license key.
• Now go to your website’s backend and then click on the Licences under Booster Setting.
• If you have installed and activated the field icons addon then you will get the input box for adding the licence key. Paste the key here.
• Click on the Activate Licence button.

Steps to update the Field Icons Addon

If you have added the license key then you can directly update the addon from your WordPress dashboard. However, if you haven’t added the key then you can download the latest version from your WPMonks account page.

We highly recommend that you add your license key to the addon.

Gravity Booster and Field Icons for Gravity Forms are compatible with Gravity Forms 2.3 and later.

Getting Started

Once you have installed and activated the Gravity Booster and Field Icons addons then you are ready to take your form design to the next level. With Gravity Booster you can design all the different elements like inputs, radios, textarea, sections, confirmation messages, buttons, etc without code. 

With Field Icons you can add font awesome and image icons to input, textarea, and button field and labels. It supports complex fields like name, address, and confirm email as well.

There are two ways to access field icon settings for a form. One is from the form editor itself and the second is from the direct menu link.

Steps to Access Field Icons from Form Editor

• The first method is to go to forms and then edit the form on which you would like to add field icons. 
• From the form editor click on the styler option. 
• Now go to the Field Icons panel.

Steps to access Field Icons from Forms Menu item

• Click on the Booster submenu under the Forms menu.
• Select the form on which you want to apply field icons.
• Navigate to the Field Icons panel.

Using Font Awesome Icons

Field icons for Gravity Forms support 900+ icons. The process of implementation of font awesome icons inside Gravity Form fields is straightforward.

The screen inside the Field Icons panel is divided into two parts. The first part is the settings sidebar from where you can customize all the settings and select the icons you want to apply.

The second part is the content area ( form preview ) where you can see all the settings getting applied on the form as you make changes.

Steps to add Font Awesome Icons to Gravity Forms Input fields.

• In the settings sidebar select Input Icons -> Fontawesome under the Icons Type option.
• Now click on the field on which you want to apply the icon. This will open the font awesome icon selection of the clicked field.
• Select the icon you want to apply. The preview will automatically refresh whenever you change the icon.

Steps to add Font Awesome Icons to Gravity Forms field labels

• From the settings sidebar navigate to Label Icons.
• From the form preview section click on any field label and it will open the control to add an icon for that label.
• Select the icon of your choice and then click on the Save button to make your changes live.
• Here you will also get controls for changing the size of label icons, adjusting its spacing and color.

Steps to switch between different pages and add icons for buttons.

If you are using page breaks in your form then the preview will show one page at a time. This behavior is similar to how Gravity Form works in the front end as well. However, clicking on the next button at the end of the form won’t take you to the next page instead it will open the settings for the Next button.

To preview the next page you can select the page from the ‘Selected Page’ option present at the top of the content preview section. From here you can select the page you want.

Customization Settings for Font Awesome Icons

There are multiple customization options to adjust the design and placement of the icons so that they look perfect on your forms.

• Move Text Away from icon: This will add left padding for the text so that it doesn’t overlap with the icons.
• Icons Size: You can use this option to increase/decrease the size of the icons.
• Move Icon Towards Bottom: This option will move the icons towards the bottom. By default the icons are aligned to the top of fields so, you can use this setting to align them in the center or at the bottom.
• Move Icon Towards Right: The icons are positioned on the very left of the field and if you want to add some space between the field border and icons then you can do that with this setting.
• Icon color: With this setting, you can set the color of the icons.

You can check the implementation of font awesome icons on the demo form.

Using Custom Images as Icons

If there are specific icons you want to implement then you can do so, by using images. You can use images directly from the media library or upload new images.

Steps to add Image Icons to Gravity Forms Fields

• From the settings sidebar select Image Icons under the Icon Type option. Though the image icons option is deprecated, we are not adding any new features to it. However, the existing features work fine, and you won’t have any issues using it.
• Click on the field to which you want to add the image icon. 
• Now click on the Open Media Library button. This will open your WordPress media library. You can select an existing image or upload a new one. The size of the image doesn’t matter and it will be automatically resized to fit inside the input field.
• If you want to change the image, click the ‘Remove Image’ button. It will immediately remove the existing image from the field and then you can add a new one.

Customization Settings for Image Icons

Image icons can be positioned as well as the text for the input field can be set so that it doesn’t overlap with image icons. Below are the settings which you can do for image icons.

• Move Text Away from the icon: This will add left padding for the text so that it doesn’t overlap with the image icons.
• Icon Alignment: This setting lets you place the image icons to be either on the left or right side.

Best practices for selecting and uploading custom icons.

Although field icons will automatically fit the image inside the input field however it is recommended that you should use smaller images. The reason for this is that the bigger the image the more time it can take to load in the front and can slow down your page.

You can check the implementation of image icons on the demo form.

Support and Community

Field icons addon is a fully supported addon. Each purchase gets 1 year of support and updates from the date of purchase. You can always renew the add-on after the expiry of the license.

If you need any help or have any questions then get in touch with us using the contact form.