Comment ajouter une icône impressionnante de police au bouton de soumission du formulaire 7 de contact

Un simple bouton“Submit” sur votre formulaire de contact semble générique. Ajout d'un icône géniale de police à l'intérieur de votre bouton de soumission du formulaire de contact 7 lui donne un indice visuel qui attire l'attention et rend l'action plus claire Pensez à une icône de plan papier à côté des“Envoyer Message” ou une icône d'enveloppe à côté de “Submit.”

Le catch ? le formulaire de contact 7 n'a pas d'option intégrée pour ajouter des icônes aux boutons Vous devez insérer le code hexadécimal Unicode de l'icône directement dans la balise du formulaire CF7 et l'associer à un petit extrait CSS pour charger la bonne police.

Ce tutoriel vous guide étape par étape dans l'ensemble du processus Vous apprendrez à ajouter un icône géniale de police sur le bouton de soumission CF7[TRADUCTION], ajoutez des icônes à l'intérieur des espaces réservés du champ de formulaire, et gérez la configuration de la famille de polices Font Awesome pour les utilisateurs d'Elementor et les configurations non-Elementor. Mise à jour pour Font Awesome 5, 6, et les dernières versions d'Elementor 2026.

Ce dont vous aurez besoin

Avant de commencer, assurez-vous de les mettre en place :

• WordPress avec Formulaire de contact 7 installé et activé
• Police géniale chargé sur votre site (via Elementor, un plugin, ou CDN manuel)
• Accès à votre thème Css personnalisé panneau (Apparence > Personnaliser > CSS supplémentaire)
• Le code hexadécimal Unicode pour l'icône souhaitée (nous vous montrerons où trouver ceci)

Temps requis: 5 à 10 minutes

Niveau de compétence : Débutant (aucune expérience de codage nécessaire, il suffit de copier-coller)

Étape 1 : Activez Font Awesome sur votre site

Votre site a besoin de Font Awesome chargé avant que des icônes ne s'affichent. La façon dont vous procédez dépend de votre configuration :

Si vous utilisez Elementor (méthode la plus simple)

Elementor est livré avec Font Awesome intégré Vous devez juste vous assurer que la rétrocompatibilité Font Awesome 4 est activée si vous utilisez des codes d'icônes plus anciens.

1. Aller à Élémenteur > Paramètres > Avancé onglet dans votre tableau de bord WordPress
2. Trouver “Load Font Awesome 4 Support” et réglez-le sur “Yes”
3. Cliquez Enregistrer Modifications

Mise à jour 2026 : Elementor charge maintenant Font Awesome 6 par défaut dans les versions récentes La bascule de” de “Load Font Awesome 4 Support assure une compatibilité ascendante avec les anciens codes d'icônes Si vous utilisez des codes d'icônes FA6 (comme ceux de la Recherche d'icônes Font Awesome 6), vous n'avez rien à changer puisque Elementor le gère automatiquement.

Si vous utilisez également Modules complémentaires principaux pour Elementor, vous avez accès à 8 bibliothèques d'icônes premium au-delà de Font Awesome, vous offrant des milliers d'icônes supplémentaires directement dans l'éditeur Elementor.

Si vous n'utilisez pas Elementor

Installez le fonctionnaire Plugin Police Awesome depuis WordPress.org. Après activation:

1. Aller à Paramètres > Police Awesome
2. Choisissez votre version (Font Awesome 5 Gratuit ou 6 Gratuit)
3. Sélectionnez la méthode de livraison (CDN pour v5 ou Kit pour v6)
4. Enregistrez et vous êtes prêt à utiliser des icônes sur votre site

Important: Font Awesome 6 n'est pas disponible via le CDN existant. Si vous souhaitez des icônes FA6, vous devrez configurer un kit gratuit sur fontawesome.com ou utilisez l'intégration Kit du plugin WordPress.

Étape 2 : Recherchez le code hexadécimal Unicode de l'icône

Chaque icône Font Awesome possède un code hexadécimal Unicode unique. C'est le code que vous collerez dans votre bouton de soumission du formulaire de contact 7.

Voici comment le trouver :

1. Aller à la Page de recherche d'icônes Font Awesome
2. Recherchez l'icône souhaitée (par exemple, “paper plane”, “enveloppe”, “arrow right”)
3. Cliquez sur l'icône pour ouvrir sa page de détails
4. Cherchez le Unicode valeur. C'est un code hexadécimal de 4 à 5 caractères comme f1d8 (avion en papier) ou f0e0 (enveloppe)

Voici quelques icônes populaires pour soumettre des boutons et leurs codes Unicode :

Étape 3 : Ajoutez l'icône Génial de la police à votre bouton de soumission du formulaire de contact 7

Maintenant, pour l'événement principal Vous allez insérer le code hexadécimal Unicode de l'icône directement dans la balise de formulaire CF7 Voici le processus exact :

Ouvrez votre formulaire de contact

Aller à Contact > Formulaires de contact dans votre tableau de bord WordPress. Cliquez sur le formulaire que vous souhaitez éditer (ou créez-en un nouveau).

Trouver l'étiquette du bouton Soumettre

Dans l'éditeur de formulaire, recherchez la balise du bouton Soumettre. Cela ressemble généralement à ceci :

[submit "Submit"]

Insérez le code hexadécimal Unicode

Remplacez la balise de soumission par le code d'icône placé à côté du texte de votre bouton Utilisez le format d'entité HTML &#x + code hex + ;

Par exemple, pour ajouter une icône de plan papier après le texte “Envoyer Message” :

[submit "Send Message "]

Ou pour mettre l'icône avant le texte :

[submit " Send Message"]

Voici un exemple complet de formulaire de contact avec l'icône dans le bouton Soumettre :

<label>Your Name
    [text* your-name]</label>

<label>Your Email
    [email* your-email]</label>

<label>Subject
    [text your-subject]</label>

<label>Your Message
    [textarea your-message]</label>

[submit "Send Message &#xf1d8;"]

Étape 4 : Ajoutez le CSS pour la police d'icône

L'icône ne s'affichera pas correctement tant que vous n'aurez pas indiqué au navigateur quelle police utiliser pour le bouton de soumission Sans ce CSS, vous verrez un petit carré ou un point d'interrogation au lieu de l'icône.

Aller à Apparence > Personnaliser > CSS supplémentaire et collez l'un des extraits suivants :

Pour Font Awesome 5 (par défaut de l'élémenteur)

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

Pour Font Awesome 6

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
}

Le font-weight: 900 est requis pour les icônes Solid (le style le plus courant).Si vous utilisez des icônes Regular, changez-le en font-weight: 400. Pour les icônes de marque (comme le logo Twitter ou GitHub), utilisez font-family: "Font Awesome 6 Brands" avec font-weight: 400.

Conseil professionnel : Si l'icône s'affiche sur le bureau mais pas sur le mobile, ajoutez -webkit-font-smoothing: antialiased; et text-rendering: auto; à la règle CSS. Cela corrige les incohérences de rendu entre les navigateurs.

Enregistrez votre CSS et prévisualisez le formulaire Vous devriez maintenant voir l'icône rendue à l'intérieur de votre bouton de soumission à côté du texte.

Bonus : ajoutez des icônes géniales de police aux champs d'espace réservé CF7

Vous voulez des icônes à l'intérieur de vos espaces réservés de champ de formulaire aussi ? vous pouvez ajouter une icône d'enveloppe dans le champ de courriel, une icône d'utilisateur dans le champ de nom et une icône de crayon dans le champ de message Il prend la même approche Unicode.

Voici le code CF7 avec des icônes dans les espaces réservés :

[text* your-name placeholder " Your Name"]

[email* your-email placeholder " Your Email"]

[text your-subject placeholder " Subject"]

[textarea your-message placeholder " Your Message"]

[submit "Send Message "]

Ajoutez maintenant le CSS pour appliquer la police Font Awesome à vos espaces réservés :

/* Icon font for submit button */
.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
}

/* Icon font for input placeholders */
.wpcf7 input::placeholder,
.wpcf7 textarea::placeholder {
    font-family: "Font Awesome 5 Free", Arial, sans-serif;
    font-weight: 900;
    color: #999;
}

Remarque sur les polices d'espace réservé : Réglage font-family sur les espaces réservés affecte tout le texte de l'espace réservé, pas seulement l'icône Si le reste de votre texte de l'espace réservé semble différent de celui attendu, ajoutez la police corporelle de votre thème en guise de solution de secours : font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

La méthode sans code : Style CF7 avec modules complémentaires principaux pour l'élémenteur

Si vous préférez sauter complètement le CSS, Modules complémentaires principaux pour Elementor comprend un dédié Formulaire de contact 7 widget qui vous permet de personnaliser visuellement l'apparence de votre formulaire, sans écrire une seule ligne de code.

Voici ce que vous pouvez faire avec le Widget MA Formulaire de contact 7:

• Style le bouton soumettre avec des couleurs, dégradés, effets de vol stationnaire, bordures et rembourrage personnalisés
• Personnaliser les champs de saisie avec les couleurs d'arrière-plan, le rayon de la bordure et la typographie
• Appliquer des préréglages de style pré-construits pour obtenir un formulaire poli en un clic
• Contrôlez l’espacement et la disposition pour chaque élément de formulaire du panneau Élémenteur
• Utilisez n'importe quelle icône de 8 bibliothèques d'icônes premium fourni avec Master Addons

C'est l'approche la plus rapide si vous souhaitez que votre formulaire de contact corresponde à la conception de votre site sans fouiller dans les sélecteurs CSS Il suffit de faire glisser le widget, de choisir votre formulaire et de tout styliser à partir de l'éditeur visuel.

Dépannage des problèmes courants

L'icône apparaît sous forme de case carrée ou de point d'interrogation

Cela signifie que la police Font Awesome ne se charge pas pour le bouton Soumettre. Vérifiez à nouveau que :

• Font Awesome est activé sur votre site (réglage Elementor ou plugin FA)
• Votre CSS inclut le bon font-family et font-weight
• Vous utilisez la bonne version (les noms de famille de polices FA5 vs FA6 sont différents)

L'icône apparaît mais le texte régulier a l'air bizarre

Quand vous vous êtes mis font-family pour Font Awesome pour l'ensemble du bouton, tout le texte du bouton utilise cette police Ajouter une police de secours : font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

L'icône fonctionne sur le bureau mais pas sur mobile

Ajoutez ces propriétés à votre règle CSS :

.wpcf7 input[type="submit"] {
    font-family: "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: auto;
}

Je veux utiliser un : : avant pseudo-élément à la place

Le bouton Soumettre CF7 est un <input type="submit"> élément. Les éléments de saisie ne prennent pas en charge ::before ou ::after pseudo-éléments car ils ne peuvent pas avoir de nœuds enfants C'est pourquoi nous utilisons l'approche hexadécimale Unicode directement dans le texte du bouton Si vous avez besoin d'une prise en charge des pseudo-éléments, vous devrez convertir le bouton de soumission en un <button> étiquette utilisant un crochet de filtre CF7, qui nécessite un PHP personnalisé.

Foire aux questions

Envelopper

Ajout d'un icône géniale de police sur votre bouton de soumission du formulaire de contact 7 est un petit changement qui fait une différence notable La méthode de code hexadécimal Unicode fonctionne sur Font Awesome 5 et 6, ne nécessite que deux étapes (modifier la balise de formulaire + ajouter CSS) et prend moins de 5 minutes à configurer.

Pour l'approche des espaces réservés, la même logique s'applique : collez le code hexadécimal à l'intérieur de l'attribut des espaces réservés et définissez la famille de polices dans votre CSS. Les deux méthodes donnent à vos formulaires une sensation professionnelle plus raffinée.

Si vous souhaitez ignorer entièrement CSS, le Widget Master Addons CF7 les poignées forment visuellement le style à l'intérieur d'Elementor. Quoi qu'il en soit, vos formulaires seront plus beaux que la sortie CF7 par défaut.

Lecture connexe: Guide des icônes d'élémenteurs et des bibliothèques de polices | Comment créer des boutons animés dans Elementor | Style CF7 avec addons principaux