6

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?

mat
  • 130
  • 2
  • 2
  • 12

2 Answers2

14

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>
coops
  • 1,678
  • 1
  • 13
  • 26
  • It seems that the current version of CF7 (5.4.2) adds the ajax-loader automatically even if you hardcode the button with a – Kristián Filo Aug 09 '21 at 06:51
1

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>
cabrerahector
  • 3,653
  • 4
  • 16
  • 27
  • thanks for response but it doesnt work. Wordpress ContactForm7 generate not a button but input type=submit. – mat Jan 11 '19 at 18:34
  • 1
    You're right. `input` doesn't have child nodes so `::before` and `::after` can't be applied to it. Edit your contact form and change the `` button into an actual button and it'll work ([example](https://wordpress.org/support/topic/submit-button-instead-of-inputtypesubmit/)). – cabrerahector Jan 11 '19 at 19:37