How to Add Font Awesome Icon to Contact Form 7 Submit Button

A plain “Submit” button on your contact form looks generic. Adding a font awesome icon inside your Contact Form 7 submit button gives it a visual cue that draws attention and makes the action clearer. Think of a paper plane icon next to “Send Message” or an envelope icon next to “Submit.”

The catch? Contact Form 7 doesn’t have a built-in option to add icons to buttons. You need to insert the icon’s Unicode hex code directly into the CF7 form tag and pair it with a small CSS snippet to load the correct font.

This tutorial walks you through the entire process step by step. You’ll learn how to add a font awesome icon to the CF7 submit button, add icons inside form field placeholders, and handle the Font Awesome font-family setup for both Elementor users and non-Elementor setups. Updated for Font Awesome 5, 6, and the latest 2026 Elementor versions.

What You’ll Need

Before getting started, make sure you have these in place:

• WordPress with Contact Form 7 installed and activated
• Font Awesome loaded on your site (via Elementor, a plugin, or manual CDN)
• Access to your theme’s Custom CSS panel (Appearance > Customize > Additional CSS)
• The Unicode hex code for your desired icon (we’ll show you where to find this)

Time required: 5-10 minutes

Skill level: Beginner (no coding experience needed, just copy and paste)

Step 1: Enable Font Awesome on Your Site

Your site needs Font Awesome loaded before any icons will render. How you do this depends on your setup:

If You’re Using Elementor (Easiest Method)

Elementor ships with Font Awesome built in. You just need to make sure Font Awesome 4 backward compatibility is enabled if you’re using older icon codes.

1. Go to Elementor > Settings > Advanced tab in your WordPress dashboard
2. Find “Load Font Awesome 4 Support” and set it to “Yes”
3. Click Save Changes

2026 Update: Elementor now loads Font Awesome 6 by default in recent versions. The “Load Font Awesome 4 Support” toggle ensures backward compatibility with older icon codes. If you’re using FA6 icon codes (like those from the Font Awesome 6 icon search), you don’t need to change anything since Elementor handles it automatically.

If you’re also using Master Addons for Elementor, you get access to 8 premium icon libraries beyond Font Awesome, giving you thousands of additional icons right inside the Elementor editor.

If You’re Not Using Elementor

Install the official Font Awesome plugin from WordPress.org. After activation:

1. Go to Settings > Font Awesome
2. Choose your version (Font Awesome 5 Free or 6 Free)
3. Select delivery method (CDN for v5, or a Kit for v6)
4. Save and you’re ready to use icons across your site

Important: Font Awesome 6 is not available via the legacy CDN. If you want FA6 icons, you’ll need to set up a free Kit at fontawesome.com or use the WordPress plugin’s Kit integration.

Step 2: Find the Icon’s Unicode Hex Code

Every Font Awesome icon has a unique Unicode hex code. This is the code you’ll paste into your Contact Form 7 submit button.

Here’s how to find it:

1. Go to the Font Awesome icon search page
2. Search for your desired icon (e.g., “paper plane”, “envelope”, “arrow right”)
3. Click on the icon to open its detail page
4. Look for the Unicode value. It’s a 4-5 character hex code like f1d8 (paper plane) or f0e0 (envelope)

Here are some popular icons for submit buttons and their Unicode codes:

Step 3: Add the Font Awesome Icon to Your Contact Form 7 Submit Button

Now for the main event. You’ll insert the icon’s Unicode hex code directly into the CF7 form tag. Here’s the exact process:

Open Your Contact Form

Go to Contact > Contact Forms in your WordPress dashboard. Click on the form you want to edit (or create a new one).

Find the Submit Button Tag

In the form editor, look for the submit button tag. It typically looks like this:

[submit "Submit"]

Insert the Unicode Hex Code

Replace the submit tag with the icon code placed next to your button text. Use the HTML entity format &#x + hex code + ;

For example, to add a paper plane icon after the text “Send Message”:

[submit "Send Message "]

Or to put the icon before the text:

[submit " Send Message"]

Here’s a complete contact form example with the icon in the submit button:

<label>Your Name
    [text* your-name]</label>

<label>Your Email
    [email* your-email]</label>

<label>Subject
    [text your-subject]</label>

<label>Your Message
    [textarea your-message]</label>

[submit "Send Message &#xf1d8;"]

Step 4: Add the CSS for the Icon Font

The icon won’t display correctly until you tell the browser which font to use for the submit button. Without this CSS, you’ll see a small square or question mark instead of the icon.

Go to Appearance > Customize > Additional CSS and paste one of the following snippets:

For Font Awesome 5 (Elementor Default)

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

For Font Awesome 6

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

The font-weight: 900 is required for Solid icons (the most common style). If you’re using Regular icons, change it to font-weight: 400. For Brand icons (like the Twitter or GitHub logo), use font-family: "Font Awesome 6 Brands" with font-weight: 400.

Pro Tip: If the icon shows on desktop but not on mobile, add -webkit-font-smoothing: antialiased; and text-rendering: auto; to the CSS rule. This fixes rendering inconsistencies across browsers.

Save your CSS and preview the form. You should now see the icon rendered inside your submit button next to the text.

Bonus: Add Font Awesome Icons to CF7 Placeholder Fields

Want icons inside your form field placeholders too? You can add an envelope icon in the email field, a user icon in the name field, and a pencil icon in the message field. It takes the same Unicode approach.

Here’s the CF7 code with icons in the placeholders:

[text* your-name placeholder " Your Name"]

[email* your-email placeholder " Your Email"]

[text your-subject placeholder " Subject"]

[textarea your-message placeholder " Your Message"]

[submit "Send Message "]

Now add the CSS to apply the Font Awesome font to your placeholders:

/* Icon font for submit button */
.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

/* Icon font for input placeholders */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    font-family: "Font Awesome 5 Free", Arial, sans-serif;
    font-weight: 900;
    color: #999;
}

Note on placeholder fonts: Setting font-family on placeholders affects all placeholder text, not just the icon. If the rest of your placeholder text looks different than expected, add your theme’s body font as a fallback: font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

The No-Code Method: Style CF7 with Master Addons for Elementor

If you’d rather skip the CSS entirely, Master Addons for Elementor includes a dedicated Contact Form 7 widget that lets you customize your form’s appearance visually, without writing a single line of code.

Here’s what you can do with the MA Contact Form 7 widget:

• Style the submit button with custom colors, gradients, hover effects, borders, and padding
• Customize input fields with background colors, border radius, and typography
• Apply pre-built style presets to get a polished form in one click
• Control spacing and layout for every form element from the Elementor panel
• Start from a design variation: four are free and seven more come with Master Addons Pro

This is the fastest approach if you want your contact form to match your site’s design without digging into CSS selectors. Just drag the widget in, pick your form, and style everything from the visual editor.

Troubleshooting Common Issues

The icon shows as a square box or question mark

This means the Font Awesome font isn’t loading for the submit button. Double-check that:

• Font Awesome is activated on your site (Elementor setting or FA plugin)
• Your CSS includes the correct font-family and font-weight
• You’re using the right version (FA5 vs FA6 font-family names are different)

The icon appears but the regular text looks weird

When you set font-family to Font Awesome for the entire button, all text in the button uses that font. Add a fallback font: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

The icon works on desktop but not on mobile

Add these properties to your CSS rule:

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

I want to use a ::before pseudo-element instead

The CF7 submit button is an <input type="submit"> element. Input elements don’t support ::before or ::after pseudo-elements because they can’t have child nodes. That’s why we use the Unicode hex approach directly in the button text instead. If you need pseudo-element support, you’d need to convert the submit button to a <button> tag using a CF7 filter hook, which requires custom PHP.

Frequently Asked Questions

Wrapping Up

Adding a font awesome icon to your Contact Form 7 submit button is a small change that makes a noticeable difference. The Unicode hex code method works across Font Awesome 5 and 6, requires just two steps (edit the form tag + add CSS), and takes under 5 minutes to set up.

For the placeholder approach, the same logic applies: paste the hex code inside the placeholder attribute and define the font-family in your CSS. Both methods give your forms a more polished, professional feel.

If you want to skip CSS entirely, the Master Addons CF7 widget handles form styling visually inside Elementor. Either way, your forms will look better than the default CF7 output.

Related reading: Elementor Icons and Font Libraries Guide | How to Create Animated Buttons in Elementor | CF7 Styling with Master Addons