WPForms Documentation

Documentation, Reference Materials and Tutorials for WPForms

How to Add Icons to WordPress Forms

Would you like to add icons within your forms? Icons can be a great way to visually reinforce the purpose of a field, and can help your forms look more customized.

In this tutorial, we’ll discuss how to add icons from Font Awesome to your forms. Font Awesome is a great option because their icons act like a font, meaning that they will adopt the same color and sizing as the other fonts on your site.

Here are all the topics we’ll cover in this tutorial:


How to Add Font Awesome to Your Site

The first step is to add access to Font Awesome’s icon library to your site. This can be done in many different ways, from adding code to your site’s header to installing a plugin. For details on each option, check out WPBeginner’s How to Easily Add Icon Fonts in Your WordPress Theme.

To keep things simple, we’ll use the plugin method.

Better Font Awesome is a free WordPress plugin that adds the resources needed to use Font Awesome icons on your site. Go ahead and install this plugin.

Once this plugin is installed and activated, you’re ready to start adding icons to your forms!

Note: All custom CSS can be added to your site by going to Appearance » Customize » Additional CSS. For more options on adding CSS,
please check out WPBeginner’s tutorial on How to Easily Add Custom CSS to Your WordPress Site.

Find an Icon on Font Awesome

Now that we have the ability to use Font Awesome on our site, let’s check out how to grab information for the icon you want in your form.

Any icon from Font Awesome’s icon library will work in the same way, but for this example we’ll use their paper airplane icon.

Every Font Awesome icon has a dedicated page on their site. What we need is the unicode value, which is displayed just to the right of the icon name. The unicode for this paper airplane icon is f1d9.

Font Awesome paper airplane icon page

Display Icon In Front of Form Title

Font Awesome icon in from of WPForms title

To add an icon in front of our form’s title, we need to create some custom CSS that will insert this icon for us. This CSS will be a little different depending on whether you want the icon to appear in front of the title of all WPForms on your site, or just this one form.

The CSS to display an icon in front of all form titles is simple because it can be more general. Here’s the CSS you’ll need:

div.wpforms-container-full .wpforms-form .wpforms-title:before {
    content: '\f1d9'; /* Unicode for icon, be sure to keep the quotes and backslash */
    font-family: FontAwesome;
    margin-right: 10px; /* Distance between icon and title */
}

If you check out the line for ‘content’, you’ll notice that it includes the unicode after a backslash (\). This can be replaced with the unicode for any other icon in Font Awesome’s library.

This CSS also includes a right margin of 10 pixels. Without this, there would be no gap between the icon and the form’s title. This number can be changed however you like.

Target A Single Form’s Title
Instead of adding the same icon to the titles of every form on your site, you can use more specific CSS to target only one specific form.

To target a single form, you’ll need to find a unique ID using the browser’s inspection tool. You can find a form’s ID by right clicking an part of your form and choosing Inspect.

Open Chrome inspector tool

The browser screen will split, displaying the HTML of the page.

Within this HTML, you’ll need to locate the starting line of the form code.

inspect elements

We will use this ID, wpforms-14, to make our CSS more specific. Here’s the CSS that will only add an icon in front of the title of this single form:

div.wpforms-container-full#wpforms-14 .wpforms-form .wpforms-title:before {
    content: '\f1d9'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: FontAwesome;
    margin-right: 10px; /* Distance between icon and title */
}

This CSS is almost exactly the same as the style that will change all forms on your site. The only difference is that we added #wpforms-14, so now this style will apply only within this one form.

Display Icon In Front of Field Labels

Display Font Awesome icon in front of a WPForms all field labels

Displaying an icon in front of all field labels requires very similar CSS to what was described above for form titles:

div.wpforms-container-full .wpforms-form .wpforms-field-label:before { 
    content: '\f1d9'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: FontAwesome;
    margin-right: 10px; /* Distance between icon and title */
}

Target A Single Field’s Label
You may not want the same icon to appear next to every field. To target only a single field, we’ll need to make our CSS more specific by locating the unique ID for the field.

This approach is very similar to targeting a single form’s title, described above.

First, you’ll need to right click on the field you’d like to target and choose Inspect.

Open Chrome inspector tool

Now your screen should split to show HTML from the page. Make sure the entire field you want to target is highlighted (including the label and input box), then look for the ID.

Locate ID of a specific field

For this field, the ID is wpforms-245-field_1-container. Here’s how we’d make the icon label CSS specific only to this single field:

div.wpforms-container-full .wpforms-form #wpforms-245-field_1-container .wpforms-field-label:before { 
    content: '\f1d9'; /* Unicode for icon, be sure to keep the quotes and forward slash */
    font-family: FontAwesome;
    margin-right: 10px; /* Distance between icon and title */
}

If you check out that first line of the CSS, you’ll notice that we added a ‘#’, followed by the ID we just found. Now our icon will only be added to this single field, without altering any other field labels (in this form or any other form).

Display Icons In Descriptions and HTML Fields

Adding icons to descriptions and HTML fields is the simplest option, and requires no custom CSS.

Font Awesome will provide the HTML you need to add on any icon’s page. To include their paper airplane icon, we’ll need to copy the HTML from that page.

Then we can paste this HTML into any form description, field description, or HTML field in our form.

We’ll add this icon to our form description, which can be found in the form builder under Settings » General.

Add Font Awesome icon to WPForms form description

When our form is embedded on our site, this HTML is displayed as an icon right within our form’s description:

Display an icon within the form description

That’s it! You can now add icons to multiple places in your forms, and even target only specific forms or fields to add an icon.

Would you like to style your forms even further? Check out our article on Beautiful Contact Form Designs You Can Steal (this includes how to add an icon to your Submit button).