Skip to content

Instantly share code, notes, and snippets.

@iMazed
Created February 27, 2015 09:11
Show Gist options
  • Save iMazed/36aefc85da8dc84e5ed0 to your computer and use it in GitHub Desktop.
Save iMazed/36aefc85da8dc84e5ed0 to your computer and use it in GitHub Desktop.
Great for when you want to use FontAwesome in a submit button in Contact Form 7
//add instead of [submit] in Contact Form 7
<button type="submit" class="btn btn-large btn-primary"><i class="fa fa-bed"></i></button>
<img class="ajax-loader" src="http://www.yoursite.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">
@modzerg
Copy link

modzerg commented Feb 15, 2017

Thx. It work for me)

@de-b
Copy link

de-b commented Sep 7, 2017

Thanks, it works, but now you need to remove visibility hidden. (CF7 4.8 Version)

@grgentux
Copy link

grgentux commented Jan 9, 2018

Amazing!

@bkaminski
Copy link

Great workaround! Works awesome!

@bkaminski
Copy link

bkaminski commented Feb 20, 2018

While on the topic of "Font Awesome", I found that you can replace the "ajax-loader.gif" with a FA spinner icon as well. If you completely remove the "img src" and replace it with a FA icon but assign the "ajax-loader" class to the <i> rather than the "img". Tweak the "ajax-loader" CSS and voila!

<i class="fab fa-github ajax-loader"></i>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment