J'essaie d'ajouter une icône de flèche Fontaweomeome pour soumettre le bouton Wordpress à l'aide de ContactForm7. J'ai ceci: [Soumettre classe: bouton "Envoyer un message"] dans CSS:
.wpcf7-submit:before {
content: '\f30b';
font-family: 'Font Awesome 5 Free' !important;
}
Et ça ne marche pas, aucune idée?
Je sais que je suis un peu en retard à la fête, mais je viens de trouver une option plus facile (ou du moins que je le pensais!) Cela m'a aidé à obtenir une icône sur mon bouton d'envoi.
Aucun pseudo-éléments n'est nécessaire, vous pouvez simplement insérer l'élément directement dans le formulaire de contact:
<!--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;">
Vous pouvez également ajouter des styles au bouton comme celui-ci:
/*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;">
Vous pouvez même utiliser la police AJAX AJAX Loader au lieu de la 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>
Mise à jour:
Formulaire de contact 7 par défaut utilise un <input type="submit">
élément pour le bouton d'envoi. input
éléments ne peuvent pas utiliser les éléments :: avant/:: après pseudo, car input
éléments n'ont pas de noeuds d'enfants .
Vous devrez modifier votre bouton d'envoi dans un bouton réel (comme indiqué ICI ) Pour que vous puissiez ajouter des icônes de fontawesome.
Vous devez également spécifier le font-weight
Propriété, sinon la police ne sera pas chargée par le navigateur.
.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>