¿Cómo agregar el icono de FontAwesome para enviar el botón en Wordpress usando ContactForm7?

Solución:

Sé que llego un poco tarde a la fiesta, pero acabo de encontrar una opción más fácil (¡o al menos eso creo!) Que me ayudó a obtener un icono en mi botón de envío.

No se necesitan pseudo elementos, simplemente puede insertar el elemento directamente en el formulario de contacto:

<!--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="https://foroayuda.es/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">

También puede agregar estilos al botón de esta manera:

/*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="https://foroayuda.es/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">

Actualizar:

¡Incluso puede usar Font Awesome Ajax Loader en lugar del CF7!

/*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>

---

---

Utiliza Nuestro Buscador