Sådan tilføjes skrifttype Awesome Icon til kontaktformular 7 Send knap

En almindelig “Send” knap på din kontaktformular ser generisk ud. Tilføjelse af en font awesome ikon inde i din Kontaktformular 7 indsende knappen giver det en visuel cue, der tiltrækker opmærksomhed og gør handlingen klarere. Tænk på et papirplanikon ved siden af “Send besked” eller et konvolutikon ved siden af “Send.”

Fangsten? Kontaktformular 7 har ikke en indbygget mulighed for at tilføje ikoner til knapper. Du skal indsætte ikonets Unicode hex-kode direkte i CF7-formularmærket og parre det med et lille CSS-uddrag for at indlæse den korrekte skrifttype.

Denne vejledning fører dig gennem hele processen trin for trin. Du lærer, hvordan du tilføjer en font awesome ikon til CF7 indsende knappen, tilføje ikoner inde formularfelt pladsholdere, og håndtere Font Awesome font-familie opsætning for både Elementor brugere og ikke-Elementor opsætninger. Opdateret til Font Awesome 5, 6, og de seneste 2026 Elementor versioner.

Hvad du har brug for

Før du går i gang, skal du sørge for at have disse på plads:

• WordPress med Kontaktformular 7 installeret og aktiveret
• Font Awesome indlæst på dit websted (via Elementor, et plugin eller manuel CDN)
• Adgang til dit tema Brugerdefineret CSS panel (Udseende > Tilpas > Yderligere CSS)
• Unicode hex-koden til dit ønskede ikon (vi viser dig, hvor du finder dette)

Tid påkrævet: 5-10 minutter

Færdighedsniveau: Begynder (ingen kodningsoplevelse nødvendig, bare kopier og indsæt)

Trin 1: Aktiver Font Awesome på dit websted

Dit websted har brug for Font Awesome indlæst før nogen ikoner vil gengive. Hvordan du gør dette afhænger af din opsætning:

Hvis du bruger Elementor (nemmeste metode)

Elementor leveres med Font Awesome indbygget. Du skal bare sikre dig, at Font Awesome 4 bagudkompatibilitet er aktiveret, hvis du bruger ældre ikonkoder.

1. Gå til Elementor > Indstillinger > Avanceret fane i dit WordPress dashboard
2. Find “Load Font Awesome 4 Support” og sætte den til “Ja”
3. Klik Gem ændringer

2026-opdatering: Elementor indlæser nu Font Awesome 6 som standard i de seneste versioner. “Load Font Awesome 4 Support”-skifteren sikrer bagudkompatibilitet med ældre ikonkoder. Hvis du bruger FA6-ikonkoder (som dem fra Font Awesome 6 ikon søgning), behøver du ikke ændre noget, da Elementor håndterer det automatisk.

Hvis du også bruger Master Addons til Elementor, får du adgang til 8 premium ikon biblioteker beyond Font Awesome, der giver dig tusindvis af ekstra ikoner lige inde i Elementor editor.

Hvis du ikke bruger Elementor

Installer den officielle Font Awesome plugin fra WordPress.org. Efter aktivering:

1. Gå til Indstillinger > Skrifttype Awesome
2. Vælg din version (Font Awesome 5 Gratis eller 6 Gratis)
3. Vælg leveringsmetode (CDN for v5, eller et Kit for v6)
4. Gem, og du er klar til at bruge ikoner på tværs af dit websted

Vigtigt: Font Awesome 6 er ikke tilgængelig via det ældre CDN. Hvis du vil have FA6-ikoner, skal du konfigurere et gratis sæt på fontawesome.com eller brug WordPress plugin's Kit integration.

Trin 2: Find ikonets Unicode Hex-kode

Hver Font Awesome ikon har en unik Unicode hex kode. Dette er den kode, du vil indsætte i din Kontaktformular 7 indsende knappen.

Sådan finder du det:

1. Gå til Skrifttype Awesome ikon søgeside
2. Søg efter dit ønskede ikon (f.eks. “papirplan”, “konvolut”, “pil til højre”)
3. Klik på ikonet for at åbne dets detaljeside
4. Se efter Unicode værdi. Det er en hex-kode med 4-5 tegn f1d8 (papirplan) eller f0e0 (konvolut)

Her er nogle populære ikoner til indsend knapper og deres Unicode koder:

Trin 3: Tilføj skrifttypen Awesome Icon til din kontaktformular 7 Send knappen

Nu til hovedbegivenheden. Du indsætter ikonets Unicode hex-kode direkte i CF7-formularmærket. Her er den nøjagtige proces:

Åbn din kontaktformular

Gå til Kontakt > Kontaktformularer i dit WordPress dashboard. Klik på den formular, du vil redigere (eller oprette en ny).

Find Indsend-knap-tagget

I formulareditoren skal du kigge efter indsend-knaptagget. Det ser typisk sådan ud:

[submit "Submit"]

Indsæt Unicode Hex-koden

Erstat indsend tagget med ikonkoden placeret ved siden af din knaptekst. Brug HTML-entitetsformatet &#x + hex-kode + ;

For eksempel for at tilføje et papirplanikon efter teksten “Send besked”:

[submit "Send Message "]

Eller for at sætte ikonet før teksten:

[submit " Send Message"]

Her er et komplet kontaktformulareksempel med ikonet i indsend-knappen:

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

Trin 4: Tilføj CSS for ikonskrifttypen

Ikonet vises ikke korrekt, før du fortæller browseren, hvilken skrifttype der skal bruges til indsend-knappen. Uden denne CSS vil du se en lille firkant eller et spørgsmålstegn i stedet for ikonet.

Gå til Udseende > Tilpas > Yderligere CSS og indsæt et af følgende uddrag:

Til Font Awesome 5 (Elementor Default)

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

Til Font Awesome 6

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

The font-weight: 900 er påkrævet for Solid ikoner (den mest almindelige stil). Hvis du bruger Regular ikoner, skal du ændre den til font-weight: 400. For Brand ikoner (som Twitter eller GitHub logo), brug font-family: "Font Awesome 6 Brands" med font-weight: 400.

Pro Tip: Hvis ikonet vises på skrivebordet, men ikke på mobilen, skal du tilføje -webkit-font-smoothing: antialiased; og text-rendering: auto; til CSS-reglen. Dette løser gengivelse af uoverensstemmelser på tværs af browsere.

Gem din CSS og forhåndsvisning af formularen. Du bør nu se ikonet gengivet inde i din indsend-knap ved siden af teksten.

Bonus: Tilføj Font Awesome Ikoner til CF7 Placeholder Fields

Vil du have ikoner inde i dit formularfelt pladsholdere også? Du kan tilføje en konvolut ikon i e-mail-feltet, en bruger ikon i navnet felt, og en blyant ikon i meddelelsesfeltet. Det tager den samme Unicode tilgang.

Her er CF7-koden med ikoner i pladsholderne:

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

Tilføj nu CSS for at anvende skrifttypen Skrifttype Awesome på dine pladsholdere:

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

Bemærkning om pladsholderskrifttyper: Indstilling font-family på pladsholdere påvirker al pladsholdertekst, ikke kun ikonet. Hvis resten af din pladsholdertekst ser anderledes ud end forventet, skal du tilføje dit temas kropsskrifttype som en reserve: font-family: "Font Awesome 5 Free", "Your-Theme-Font", sans-serif;

No-Code-metoden: Style CF7 med Master Addons til Elementor

Hvis du hellere vil springe CSS helt over, Master Addons til Elementor indeholder en dedikeret Kontaktformular 7 widget, der lader dig tilpasse din formulars udseende visuelt uden at skrive en eneste kodelinje.

Her er hvad du kan gøre med MA Kontaktformular 7 widget:

• Style indsend-knappen med brugerdefinerede farver, gradienter, svæveeffekter, kanter og polstring
• Tilpas indtastningsfelter med baggrundsfarver, grænseradius og typografi
• Anvend forudindstillinger i forudbygget stil for at få en poleret form med et klik
• Kontroller afstand og layout for hvert formelement fra Elementor-panelet
• Brug et hvilket som helst ikon fra 8 premium ikon biblioteker bundtet med Master Addons

Dette er den hurtigste tilgang, hvis du vil have din kontaktformular til at matche dit websteds design uden at grave i CSS-vælgere. Bare træk widgetten ind, vælg din formular, og stil alt fra den visuelle editor.

Fejlfinding af almindelige problemer

Ikonet vises som en firkantet boks eller spørgsmålstegn

Det betyder, at skrifttypen Skrifttype Awesome ikke indlæses for indsend-knappen. Dobbelttjek det:

• Font Awesome er aktiveret på dit websted (Elementor indstilling eller FA plugin)
• Din CSS inkluderer den korrekte font-family og font-weight
• Du bruger den rigtige version (FA5 vs FA6 skrifttype-familienavne er forskellige)

Ikonet vises, men den almindelige tekst ser mærkelig ud

Når du indstiller font-family til Font Awesome for hele knappen, bruger al tekst i knappen den skrifttype. Tilføj en fallback skrifttype: font-family: "Font Awesome 5 Free", -apple-system, Arial, sans-serif;

Ikonet virker på skrivebordet, men ikke på mobilen

Tilføj disse egenskaber til din CSS-regel:

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

Jeg vil bruge et ::før pseudo-element i stedet

CF7-indsendelsesknappen er en <input type="submit"> element. Inputelementer understøtter ikke ::before eller ::after pseudo-elementer, fordi de ikke kan have underordnede noder. Derfor bruger vi Unicode hex-tilgangen direkte i knapteksten i stedet. Hvis du har brug for pseudo-element-understøttelse, skal du konvertere indsend-knappen til en <button> tag ved hjælp af en CF7 filterkrog, som kræver brugerdefineret PHP.

Ofte stillede spørgsmål

Indpakning Up

Tilføjelse af en font awesome ikon til din Kontakt Form 7 indsende knappen er en lille ændring, der gør en mærkbar forskel. Unicode hex kode metoden virker på tværs af Font Awesome 5 og 6, kræver kun to trin (rediger formularen tag + tilføje CSS), og tager under 5 minutter at sætte op.

For pladsholdertilgangen gælder den samme logik: Indsæt hex-koden inde i pladsholderattributten, og definer skrifttypefamilien i din CSS. Begge metoder giver dine formularer en mere poleret, professionel følelse.

Hvis du helt vil springe CSS over, vil Master Addons CF7 widget håndterer form styling visuelt inde Elementor. Uanset hvad, dine formularer vil se bedre ud end standard CF7 output.

Relateret læsning: Vejledning til elementorikoner og skrifttypebiblioteker | Sådan oprettes animerede knapper i Elementor | CF7 Styling med Master Addons