Now you can use fontawesome icons easily inside the gravity live summary. You can define this for each field by using CSS classes. Follow the below steps.

1. Turn on fontawesome in the form settings

Open the Live Summary settings of your form. On the General tab, in the Extra panel, turn on “Enable fontawesome 6 Free” and save. This loads the free fontawesome 6 library (version 6.4.2) on the pages with your form. If your theme already loads fontawesome you can leave this off.

The Extra panel with Enable fontawesome 6 Free turned on

2. Add the lsfa-free class

Adding one icon to your field comes down to adding 2 CSS classes to your field. The first one should always be lsfa-free which activates the proper CSS for fontawesome

3. Choose icon on the fontawesome site

Head over to the fontawesome.com website and search the icon you want to use. You can select any of the free icons. We are only interested in the second class of the icon. As seen in the below screenshot

4. All together

On the field settings of your field, navigate to the “Live Summary” tab and enter the CSS classes into the “Custom CSS class for summary line” textbox. As seen below in the screenshot.

The Live Summary tab of a field with lsfa-free fa-user in the Custom CSS class for summary line box

Result on the frontend:

5. Save form

Didn’t find what you were looking for?

Or contact support and I will help you out.