How to add FontAwesome icon to submit button in Wordpress using ContactForm7?

Question

I am trying to add fontawesome arrow icon to submit button in Wordpress using ContactForm7. I have this: [submit class:button "Send a message "] in css:

.wpcf7-submit:before {
    content: '\f30b';
    font-family: 'Font Awesome 5 Free' !important;
}

And it doesnt work, any ideas?

Answer 1

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>

Answer 2

Update:

Contact Form 7 by default uses an <input type="submit"> element for the submit button. input elements can't use the ::before/::after pseudo elements because input elements don't have child nodes.

You'll need to change your submit button into an actual button (as shown here) for you to be able to add FontAwesome icons to it.

---

You also need to specify the font-weight property, otherwise the font won't be loaded by the browser.

.wpcf7-submit::before {
    content: "\f30b";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
 }

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">

<form action="" method="post">
  <button type="submit" class="wpcf7-submit">
    Send
  </button>
</form>