We’re with you! We're offering 25% Discount Coupon Code: ENJOY25 Buy Now

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

This is Roy and I produce content, Video, Documentation for Master Addons plugin User. Keeping you update through posts, videos is my duty. Also, I provide support for any users to solve their problems.

Get Elementor Pro

convinced enough to purchase

Download Now and Speed up your design skill

Still confused? Try 14 days Free Tiral before Purchase. Don't hesitate, we offer hassle free 30-day money-back guarantee.

Subscribe to our Newsletter

Share via
Share this

Master Addons Demos

Heading

Animated Headlines
Dual Heading
Gradient Headline

Image

Image Hover Effects
Image Hotspot
Filterable Image Gallery
Image Comparison
Gallery Slider
Advanced Image

Content

Advanced Accordion
Tabs
Toggle Content
Team Member
Team Slider
Infobox
Flipbox
Blog
Timeline
Business Hours
Pricing Table
Restrict Content
Dynamic Table

Special Elements

Call to Action
Tooltip
Progress Bar
Progress Bars
Creative Button
Creative Links
News Ticker
Table of Contents
Current Time
Domain Search
Nav Menu
Search
Blockquote
Counter Up
Countdown Timer

Extensions

Particles
Animated Gradient BG
Reading Progress Bar
Background Slider
Custom CSS
Custom JS
Positioning
Container Extras
Mega Menu
Entrance Animation
Transforms
Rellax
Reveal
Header,Footer,Comment
Display Conditions
Dynamic Tags
Floating Effects
Custom Breakpoints
Post/Page Duplicator
Wrapper Link

Contact Form

Contact Form 7
Ninja Form
WP Forms
Gravity Forms
Caldera Forms
weForms