fbpx

How to Apply Font Awesome Icon inside Contact Form 7 Submit Button

Insert Font Awesome Icon inside Contact Form 7

By default, you can’t see any system to insert font awesome icon inside contact for 7 submit button. As this is a problem so there is a way. I am going to share little tips which will save time.

If you are using Elementor Page builder then make sure you have enabled the Font awesome icon library. Just navigate to Elementor>Settings>Advanced tab. Select “Yes” for “Load Font Awesome 4 Support” and save it.

Load Font Awesome 4 Support

Note: If you don’t have Elementor Plugin installed in your WordPress Website. Then just download Font Awesome Plugin and active it in your Website. 

Now follow the steps and configure your contact form:

Visit Font Awesome Icon cheatsheet and search for your icon. You will get “Unicode hex” beside each icon. Check the following screenshot. Blue marked are “Unicode Hex“.

font awesome icon cheatsheet

Go to your Website Dashboard and create a new form or Edit Existing Contact Form. If you are using our Master Addons Plugin then you will get 100% customizable form system with huge style preset. You can customize your contact form with our “Contact Form 7 elements” options panel.

If you want to customize the style of your contact form without tying a single line markup or CSS code then check out Editing Contact Form 7 Style document.

Now you need to place the “Unicode Hex” inside the submit button. But you can’t just copy and paste the Hex code. There is a way which you have to follow.

I am placing the backend contact form 7 code from our demo. You can see “&#x f1d8;” code beside Submit text. Here “f1d8” is the Unicode Hex. Replace this with your desired icon “Unicode Hex” code.

[text* your-name "Name"]

[email* your-email "Email"]

[text your-subject "Subject"]

[textarea your-message "Message"]

[submit "Submit "]

You can copy the contact form code for your website too. 

It’s time to select the font for submit icon. You have to define font family otherwise it will not work. Copy the following CSS code and paste it in your custom CSS option. Navigate to appreance>customize>Additional CSS. 

.wpcf7-submit {
font-family: FontAwesome !important;
}

That’s all to insert icon inside contact form 7 submit button. You can apply any other icon by applying the same method. 

Insert Icon Inside Contact Form 7 Submit button​This is how it looks with icon + submit button.

Feel free to chat with us if you face any problem. We will try our best to help you configuring icon in your contact form 7. 

Posted in Tutorials
Use BLACKFRIDAY50 Coupon Code for 50% Discount 
Pricing
close-image