So fügen Sie dem Kontaktformular 7 Font Awesome Icon hinzu. Senden Sie die Schaltfläche

Ein einfacher “Absenden” - Button auf Ihrem Kontaktformular sieht generisch aus Hinzufügen eines Font-Awesome-Symbol in Ihrem Kontaktformular 7-Absenden-Button Gibt ihm einen visuellen Hinweis, der Aufmerksamkeit erregt und die Aktion klarer macht Denken Sie an ein Papierebenensymbol neben “Nachricht senden” oder an ein Umschlagsymbol neben “Absenden”

Der Haken? kontakt form 7 hat keine eingebaute Option, um Icons zu Schaltflächen hinzuzufügen Sie müssen den Unicode-Hexcode des Icons direkt in das CF7-Formular-Tag einfügen und mit einem kleinen CSS-Snippet koppeln, um die richtige Schriftart zu laden.

Dieses Tutorial führt Sie Schritt für Schritt durch den gesamten Prozess, Sie lernen, wie Sie ein hinzufügen Schriftart-Geiles Symbol für die CF7-Absenden-SchaltflächeFügen Sie Symbole in Feldplatzhaltern hinzu und verwalten Sie die Schriftartenfamilie Font Awesome sowohl für Elementor-Benutzer als auch für Nicht-Elementor-Setups. Aktualisiert für Font Awesome 5, 6 und die neuesten Elementorversionen 2026.

Was Sie brauchen werden

Bevor Sie beginnen, stellen Sie sicher, dass Sie diese vorhanden haben:

• WordPress Mit Kontaktformular 7 Installiert und aktiviert
• Schriftartig Auf Ihrer Website geladen (über Elementor, ein Plugin oder manuelles CDN)
• Zugriff auf Ihr Theme Benutzerdefiniertes CSS Panel (Erscheinung > Anpassen > Zusätzliches CSS)
• Der Unicode-Hexcode für Ihr Wunsch-Icon (wir zeigen Ihnen, wo Sie das finden)

Zeitaufwand: 5-10 Minuten

Fähigkeitsstufe: Anfänger (keine Codierungserfahrung erforderlich, einfach kopieren und einfügen)

Schritt 1: Aktivieren Sie Font Awesome auf Ihrer Website

Ihre Website muss Font Awesome geladen haben, bevor Symbole gerendert werden. Wie Sie dies tun, hängt von Ihrem Setup ab:

Wenn Sie Elementor verwenden (einfachste Methode)

Elementor wird mit eingebautem Font Awesome ausgeliefert. Sie müssen nur sicherstellen, dass die Abwärtskompatibilität von Font Awesome 4 aktiviert ist, wenn Sie ältere Symbolcodes verwenden.

1. Gehe zu Elementor > Einstellungen > Erweitert Tab in Ihrem WordPress-Dashboard
2. Finden “Load Font Awesome 4 Support” Und stellen Sie es auf “Ja”
3. Klicken Sie auf Änderungen speichern

Update 2026: Elementor lädt nun in den letzten Versionen standardmäßig Font Awesome 6. Der Umschalter “Load Font Awesome 4 Support” sorgt für Abwärtskompatibilität mit älteren Icon-Codes, wenn Sie FA6-Icon-Codes verwenden (wie die aus dem Suche nach Schriftarten-Awesome-6-Symbolen), Sie brauchen nichts zu ändern, da Elementor es automatisch abwickelt.

Wenn Sie auch verwenden Master-Addons für ElementorSie erhalten Zugriff auf 8 Premium-Icon-Bibliotheken Über Font Awesome hinaus erhalten Sie Tausende zusätzlicher Symbole direkt im Elementor-Editor.

Wenn Sie Elementor nicht verwenden

Installieren Sie den Beamten Font Awesome-Plugin von WordPress.org. Nach Aktivierung:

1. Gehe zu Einstellungen > Schriftart Großartig
2. Wählen Sie Ihre Version (Font Awesome 5 kostenlos oder 6 kostenlos)
3. Wählen Sie die Bereitstellungsmethode (CDN für v5 oder ein Kit für v6)
4. Speichern Sie und Sie sind bereit, Symbole auf Ihrer Website zu verwenden

Wichtig: Font Awesome 6 ist nicht über das ältere CDN verfügbar. Wenn Sie FA6-Symbole wünschen, müssen Sie ein kostenloses Kit unter einrichten fontawesome.com oder nutzen Sie die Kit-Integration des WordPress-Plugins.

Schritt 2: Finden Sie den Unicode-Hex-Code des Symbols

Jedes Font Awesome-Symbol hat einen eindeutigen Unicode-Hexcode. Dies ist der Code, den Sie in Ihre Kontaktformular-7-Absendeschaltfläche einfügen.

So finden Sie es:

1. Gehe zu den Font Awesome Symbol-Suchseite
2. Suchen Sie nach Ihrem gewünschten Icon (z.B, “Papierhobel”, “Umschlag”, “Pfeil rechts”)
3. Klicken Sie auf das Symbol, um die Detailseite zu öffnen
4. Suchen Sie nach der Unicode Wert. Es ist ein 4-5 Zeichen Hex-Code wie f1d8 (Papierhobel) oder f0e0 (umschlag)

Hier sind einige beliebte Symbole für Einreichschaltflächen und ihre Unicode-Codes:

Schritt 3: Fügen Sie das Font Awesome Icon zu Ihrer Kontaktformular-7-Absendetaste hinzu

Nun zum Main Event Du fügst den Unicode-Hexcode des Icons direkt in das CF7-Formular-Tag ein Hier der genaue Ablauf:

Öffnen Sie Ihr Kontaktformular

Gehe zu Kontakt > Kontaktformulare In Ihrem WordPress Dashboard Klicken Sie auf das Formular, das Sie bearbeiten (oder ein neues erstellen) möchten.

Finden Sie den Button-Tag zum Absenden

Im Formular-Editor suchen Sie nach dem Submit-Button-Tag. Normalerweise sieht es so aus:

[submit "Submit"]

Fügen Sie den Unicode-Hex-Code ein

Ersetzen Sie das Submit-Tag durch den neben Ihrem Button-Text platzierten Icon-Code Verwenden Sie das HTML-Entity-Format &#x + Hex-Code + ;

Zum Beispiel, um ein Papierebenensymbol nach dem Text “Nachricht senden” hinzuzufügen:

[submit "Send Message "]

Oder um das Symbol vor den Text zu setzen:

[submit " Send Message"]

Hier ein komplettes Kontaktformular-Beispiel mit dem Icon im Submit-Button:

<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;"]

Schritt 4: Fügen Sie das CSS für die Symbolschriftart hinzu

Das Icon wird erst richtig angezeigt, wenn Sie dem Browser mitteilen, welche Schriftart für den Submit-Button verwendet werden soll Ohne dieses CSS sehen Sie statt des Icons ein kleines Quadrat oder Fragezeichen.

Gehe zu Aussehen > Anpassen > Zusätzliches CSS und fügen Sie einen der folgenden Ausschnitte ein:

Für Font Awesome 5 (Elementor Default)

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

Für Font Awesome 6

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

Die font-weight: 900 Wird für Solid-Icons (der gebräuchlichste Stil) benötigt Wenn Sie Regular-Icons verwenden, ändern Sie ihn in font-weight: 400. Für Markensymbole (wie das Twitter- oder GitHub-Logo) verwenden Sie font-family: "Font Awesome 6 Brands" Mit font-weight: 400.

Profi-Tipp: Wenn das Symbol auf dem Desktop, aber nicht auf dem Handy angezeigt wird, fügen Sie hinzu -webkit-font-smoothing: antialiased; und text-rendering: auto; zur CSS-Regel Dadurch werden Rendering-Inkonsistenzen zwischen Browsern behoben.

Speichern Sie Ihr CSS und sehen Sie sich das Formular in der Vorschau an. Sie sollten nun das Symbol sehen, das in Ihrem Einsenden-Button neben dem Text gerendert wird.

Bonus: Fügen Sie Font Awesome Icons zu CF7-Platzhalterfeldern hinzu

Möchten Sie Symbole auch in Ihren Formularfeld-Platzhaltern? Sie können ein Umschlag-Symbol im E-Mail-Feld, ein Benutzersymbol im Namensfeld und ein Bleistiftsymbol im Nachrichtenfeld hinzufügen. Es erfolgt der gleiche Unicode-Ansatz.

Hier der CF7-Code mit Icons in den Platzhaltern:

[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 "]

Fügen Sie nun das CSS hinzu, um die Schriftart Font Awesome auf Ihre Platzhalter anzuwenden:

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

Hinweis zu Platzhalterschriften: Einstellung font-family on Platzhalter betrifft den gesamten Platzhaltertext, nicht nur das Icon, wenn der Rest deines Platzhaltertextes anders aussieht als erwartet, füge als Fallback die Body-Schrift deines Themes hinzu: font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

Die No-Code-Methode: Style CF7 mit Master-Addons für Elementor

Wenn du lieber ganz auf das CSS verzichten möchtest, dann Master-Addons für Elementor Eingeweiht Kontaktformular 7 Widget, mit dem Sie das Erscheinungsbild Ihres Formulars visuell anpassen können, ohne eine einzige Codezeile schreiben zu müssen.

Folgendes können Sie mit der MA Kontaktformular 7 Widget:

• Stil der Submit-Schaltfläche Mit benutzerdefinierten Farben, Farbverläufen, Hover-Effekten, Rändern und Polstern
• Eingabefelder anpassen Mit Hintergrundfarben, Randradius und Typografie
• Wenden Sie vorgefertigte Stilvoreinstellungen an Polierte Form mit einem Klick zu erhalten
• Kontrollabstand und Layout Für jedes Formularelement aus dem Elementor-Panel
• Verwenden Sie ein beliebiges Symbol Von 8 Premium-Icon-Bibliotheken Gebündelt mit Master Addons

Dies ist der schnellste Ansatz, wenn Ihr Kontaktformular zum Design Ihrer Website passen soll, ohne in CSS-Auswahlfunktionen zu greifen Ziehen Sie einfach das Widget hinein, wählen Sie Ihr Formular aus und stylen Sie alles aus dem visuellen Editor.

Fehlerbehebung bei häufigen Problemen

Das Symbol wird als quadratisches Kästchen oder Fragezeichen angezeigt

Das bedeutet, dass die Schriftart Font Awesome nicht für den Submit-Button geladen wird. Überprüfen Sie noch einmal Folgendes:

• Font Awesome ist auf Ihrer Seite aktiviert (Elementor-Einstellung oder FA-Plugin)
• Ihr CSS beinhaltet die richtige font-family und font-weight
• Sie verwenden die richtige Version (die Namen der Schriftarten FA5 vs. FA6 sind unterschiedlich)

Das Symbol erscheint, aber der normale Text sieht seltsam aus

Wenn Sie einstellen font-family Um Font Awesome für die gesamte Schaltfläche zu verwenden, verwendet der gesamte Text in der Schaltfläche diese Schriftart Fügen Sie eine Fallback-Schriftart hinzu: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

Das Symbol funktioniert auf dem Desktop, aber nicht auf dem Handy

Fügen Sie diese Eigenschaften zu Ihrer CSS-Regel hinzu:

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

Ich möchte stattdessen ein ::before-Pseudoelement verwenden

Der CF7-Sending-Button ist ein <input type="submit"> Element. Eingabeelemente unterstützen nicht ::before oder ::after Pseudoelemente, weil sie keine untergeordneten Knoten haben können Deshalb verwenden wir stattdessen den Unicode-Hex-Ansatz direkt im Buttontext Wenn Sie Pseudoelementunterstützung benötigen, müssten Sie den Submit-Button in einen konvertieren <button> Tag mit einem CF7-Filter-Hook, der benutzerdefiniertes PHP erfordert.

Häufig gestellte Fragen

Einwickelnd

Hinzufügen eines Font-Geiles Symbol für Ihren Kontaktformular-7-Absendebutton Ist eine kleine Änderung, die einen spürbaren Unterschied macht Die Unicode-Hexcode-Methode funktioniert über Font Awesome 5 und 6 hinweg, erfordert nur zwei Schritte (das Formular-Tag bearbeiten + CSS hinzufügen), und dauert weniger als 5 Minuten, um sie einzurichten.

Für den Platzhalteransatz gilt die gleiche Logik: Fügen Sie den Hex-Code in das Platzhalterattribut ein und definieren Sie die Schriftfamilie in Ihrem CSS. Beide Methoden verleihen Ihren Formularen ein ausgefeilteres, professionelleres Gefühl.

Wenn Sie CSS ganz überspringen möchten, ist die Master Addons CF7 Widget Handles bilden das Styling visuell innerhalb von Elementor. So oder so sehen Ihre Formulare besser aus als die Standardausgabe von CF7.

Verwandte Lektüre: Leitfaden zu Elementor-Symbolen und Schriftbibliotheken | So erstellen Sie animierte Schaltflächen in Elementor | CF7-Styling mit Master-Add-ons