How to add FontAwesome icon to submit button in Wordpress using ContactForm7?
I know I'm a bit late to the party, but I've just found an easier option (or at least I thought so!) that helped me get an icon on my submit button.
No pseudo elements needed, you can just insert the element straight into the Contact Form:
<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">You can also then add styles to the button like this:
/*Then you can add whatever style you want to your button*/
button.wpcf7-submit {
background: #31D1D3;
padding: 10px 15px;
border: 0;
}
button.wpcf7-submit i {
margin-left: 5px
}
button.wpcf7-submit:hover {
color: white;
}
button.wpcf7-submit:hover i {
color: white;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->
<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<img class="ajax-loader" src="/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">Update:
You can even use Font Awesome Ajax Loader instead of the CF7 one!
/*Then you can add whatever style you want to your button*/
button.wpcf7-submit {
background: #31D1D3;
padding: 10px 15px;
border: 0;
}
button.wpcf7-submit i {
margin-left: 5px
}
button.wpcf7-submit:hover {
color: white;
}
button.wpcf7-submit:hover i {
color: white;
}<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
<!--just for this example, presume you already have font awesome installed if you're looking to output a button-->
<!--add the following instead of [submit] in Contact Form 7-->
<button type="submit" class="btn primary wpcf7-submit">Send Message<i class="fas fa-arrow-circle-right"></i></button>
<i class="fab fa-github ajax-loader" style="visibility: hidden; opacity: 1;"></i>