¿Cómo agregar el ícono FontAwesome para enviar el botón en WordPress usando ContactForm7?

4 minutos de lectura

Estoy tratando de agregar un ícono de flecha impresionante para enviar el botón en WordPress usando ContactForm7. Tengo esto:
[submit class:button “Send a message ”]
en CSS:

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

Y no funciona, alguna idea?

  • ¿Existen otras reglas CSS para .wpcf7-submit:before (en Chrome: Inspeccionar> Estilos)?

    – cabrerahector

    11 de enero de 2019 a las 15:24

  • no hay otras reglas css para esto

    – estera

    11 de enero de 2019 a las 15:27


  • Intenta agregar display: inline-block; a sus reglas y ver si ayuda.

    – cabrerahector

    11 de enero de 2019 a las 15:28

  • no funciona estoy importando una fuente impresionante desde use.fontawesome.com/releases/v5.6.3/css/all.css“integrity=”sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/” crossorigin=”anonymous”> y es para este enlace una buena familia de fuentes: ‘Font Awesome 5 Free’?

    – estera

    11/01/2019 a las 15:30

  • Echa un vistazo a la respuesta a continuación. Si te ayudó, por favor considera aceptarlo.

    – cabrerahector

    11 de enero de 2019 a las 15:54

Sé que llegué un poco tarde a la fiesta, pero acabo de encontrar una opción más fácil (¡o al menos eso pensé!) que me ayudó a obtener un ícono 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://stackoverflow.com/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://stackoverflow.com/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Sending ..." style="visibility: hidden; opacity: 1;">

Actualizar:

¡Incluso puedes 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>

  • Parece que la versión actual de CF7 (5.4.2) agrega el cargador ajax automáticamente incluso si codifica el botón con una etiqueta

    – Kristián Filo

    9 de agosto de 2021 a las 6:51

avatar de usuario
cabrerahector

Actualizar:

El formulario de contacto 7 utiliza por defecto un <input type="submit"> elemento para el botón enviar. input los elementos no pueden usar los pseudoelementos ::before/::after porque input los elementos no tienen nodos secundarios.

Deberá cambiar su botón de envío a un botón real (como se muestra aquí) para que pueda agregarle iconos de FontAwesome.


También debe especificar el font-weight propiedad, de lo contrario, el navegador no cargará la fuente.

.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>

  • gracias por la respuesta pero no funciona. WordPress ContactForm7 no genera un botón sino un tipo de entrada = enviar.

    – estera

    11 de enero de 2019 a las 18:34

  • Estás bien. input no tiene nodos secundarios, por lo que ::before y ::after no se le puede aplicar. Edite su formulario de contacto y cambie el <input type="submit"> botón en un botón real y funcionará (ejemplo).

    – cabrerahector

    11 de enero de 2019 a las 19:37


¿Ha sido útil esta solución?