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 Field Icons addon. This addon comes with multiple options to customize the design of icons like color, size, padding etc and 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 Field icons addon.

Fontawesome Icons

Fontawesome Icons

Steps to Add Font Awesome Icons into Gravity Forms Fields.

  1. Download and Install Styles & Layouts for Gravity forms as well as Field Icons addon.
  2. Open customizer then got to Styles & Layouts GF option.
  3. Now select to form to which you want to add font awesome icons.
  4. Now go to Field Icons section. Here you will get the option to use either images or font awesome as icons for your form fields.

    Choice for Image or Fontawesome

    A choice for Image or Fontawesome

  5. Once you have selected font awesome then you will get the following options.
    • 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.
    • Each field of your form that supports icons will automatically get listed under Field Icons customizer section. You can select the icon for each field and it will be immediately previewed.

    Fontawesome options.

    Fontawesome options.

Steps to use Images as Icons in Gravity Forms

Follow the steps mentioned above to open Field Icons section in customizer and select Images option.

Here you will get the following option

  • 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.
    Each field of your form that supports icons will automatically show the option to upload image icons. You can also use the images already uploaded in the media library. The images will be automatically resized to fit inside the field.
Images as icon settings.

Images as icon settings.

If you need any help with setting up the icons or you are facing any issue then feel free to leave a comment below and I will get back to you.