Add Font Awesome Icons To A Submit Button Using Formidable Pro

If you want to add Font Awesome to a submit button, normally you would use the new html5 button tag so you can easily add html content to your button label. In Formidable Pro, however, their forms use input tags for buttons. Input tags get their title from the value parameter and this parameter requires a slightly different approach, but it’s still really easy.

First of all, I am going to assume you have already add Font Awesome to your website. If you need help with this, follow their directions here.

Add Font Awesome icons to a submit button

Step 1: Every icon for Font Awesome has a unicode version. This unicode version of the icon is what you need to add to your submit button’s text field in the form where you are adding the icon. There are a few ways to find this unicode for the font you will be using. The easiest method is to copy it straight off the Font Awesome Cheatsheet. Just copy everything between the brackets for the icon you want to use.

Add Font Awesome icon to a submit button using the cheatsheet

Step 2: Now you need to add the copied unicode to the html of your submit button. On the settings page of your form, click the Customize HTML tab (requires Pro version) and scroll to the bottom field where you can edit the submit button html. Here, find the input html for the submit button and add the unicode to the Value parameter. Either before or after the button_label shortcode and within the quotes.

Formidable Pro customize html in form settings

Step 3: You’re not done yet. If you save and take a look at your button, you will see some other strange character where your icon should be. Now you need to update your CSS and set the font for your submit button to use Font Awesome first. Add something like this to your theme’s CSS file…

Now after you’ve saved and refreshed the page your form is on, you’ll see the new icon!

Using PHP to add Font Awesome icons to a submit button

For advanced users who would like to add Font Awesome icons to a submit button programatically, you can create a filter in your theme functions.php file in place of step 1.

The filter function above adds a different icon just before the submit button text depending on which form is being loaded in the page.

3 Comments

  1. […] you like this article, you might also like to learn how to create submit button icons […]



  2. Moses on May 9, 2017 at 7:47 AM

    Silly little tutorial:

    “Step 2: You’re not done yet. If you save and take a look at your button, you will see some other strange character”

    Formidable Pro forms don’t have any options to see the submit button or to add the unicode to it. Not sure what you’re talking about.



  3. Michael Davis on May 15, 2017 at 11:19 AM

    Thanks for your feedback! You inspired me to take another look at this and take a stab at clarifying it some. If you’re not seeing the Customize HTML tab in the form settings, you may need to be sure you’re using a “pro” version.



Leave a Comment





This site uses Akismet to reduce spam. Learn how your comment data is processed.