Et nettsted uten ikoner ser ut som en vegg av tekst fra 2005. Men å tegne ikoner i Photoshop og fikle med sprites er ikke morsomt, spesielt ikke hvis du ikke er designer.

Font Awesome har løst dette problemet siden 2012: det er et gratis bibliotek med over 2000 vektorikoner som oppfører seg som vanlig tekst. Endre fargen i CSS, så endrer ikonet farge. Øk skriftstørrelsen, og det skaleres uten pikselering eller uskarphet.

I praksis er gratisversjonen nok for menyer, knapper og sosiale medier. Hvis du trenger duotones og over 30 000 ikoner, finnes det Pro fra $60 per år. Nedenfor er tre måter å legge til Font Awesome på WordPress: fra den enkleste til manuell installasjon for dem som ikke er redde for functions.php.

💡 Rask oversikt:

• Installer den offisielle Font Awesome-utvidelsen fra WordPress-katalogen; det tar et minutt og krever ingen kodeendringer
• For manuell kontroll, koble til Font Awesome via CDN eller Kit i functions.php i ditt child theme
• Hvis du bruker Elementor, er ikoner allerede innebygd, og du trenger ingen separat utvidelse
• Etter tilkobling endrer du ikonstørrelse, farge og animasjon via CSS eller ferdige klasser

Hva er Font Awesome

Font Awesome er en ikonfont: i stedet for bokstaver inneholder den ikonsymboler. Nettleseren gjengir dem som vektorgrafikk, så kantene forblir skarpe på alle skjermer og i alle skalaer. Ingen PNG-er, sprites eller srcset.

Biblioteket er delt i to deler. Gratisversjonen inkluderer fem stiler: Solid, Regular, Brands, Duotone og Sharp. Pro legger til Thin, Light og titusenvis av ikoner, pluss muligheten til å laste opp dine egne SVG-er via Kit. For en typisk bedriftsside eller blogg dekker Free de aller fleste oppgaver: piler, sosiale medier, søk, handlekurv, avkrysningsbokser.

Den største fordelen fremfor rasterikoner er full kontroll via CSS. Farge, størrelse, skygge, rotasjon, animasjon: alt settes med klasser uten noen form for grafisk redigering.

Metode 1: offisiell utvidelse (anbefalt)

Den tryggeste veien er å installere den offisielle Font Awesome-utvidelsen på WordPress.org. Den utgis av det samme teamet som lager selve biblioteket. Utvidelsen oppdateres i takt med nye ikonutgivelser og er ikke avhengig av temaet ditt.

Slik installerer du:

Gå til Utvidelser → Legg til ny. I søkefeltet skriver du "font awesome" og trykker Enter.

Klikk Installer nå, deretter Aktiver.

Ferdig. Etter aktivering vises et Font Awesome-element i Innstillinger-menyen der du kan bytte ikonkilde (CDN eller Kit), aktivere kompatibilitet med versjon fire og kjøre konfliktskanneren.

Utvidelsen legger til en egen "Font Awesome Icon"-blokk i blokkredigereren. Klikk på den, så åpnes et søk i hele biblioteket. Velg et ikon, klikk "Sett inn", så vises det i teksten som en SVG. Styling gjøres rett i blokkens sidepanel: størrelse, farge, rotasjon.

For den klassiske redigereren fungerer en shortcode:

1
[icon name="download" prefix="fa-solid"]

Eller ren HTML:

1
<i class="fa-solid fa-download"></i>

Har du en Pro-konto, oppretter du et Kit på fontawesome.com, kopierer API-tokenet og limer det inn i plugin-innstillingene. Etter det vil ikonvelgeren også vise Pro-ikoner.

Metode 2: manuell installasjon via functions.php

Denne metoden er for deg som vil ha kontroll på alle ressurser som lastes på nettstedet, eller som vil unngå ekstra plugins. Den gjøres via et child theme, slik at en oppdatering av parent theme ikke sletter endringene dine.

Opprett et child theme

I mappen wp-content/themes/ oppretter du en katalog med endelsen -child (for eksempel astra-child). Inni oppretter du to filer.

style.css:

1
/*
2
Theme Name: Astra Child
3
Template: astra
4
*/

functions.php:

1
<?php
2
add_action('wp_enqueue_scripts', 'enqueue_parent_styles');
3
function enqueue_parent_styles() {
4
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
5
}

Gå til Utseende → Temaer og aktiver child theme-et.

Koble til Font Awesome via CDN

Legg denne koden i functions.php i child theme-et ditt:

1
add_action('wp_enqueue_scripts', 'enqueue_font_awesome');
2
function enqueue_font_awesome() {
3
    wp_enqueue_style(
4
        'font-awesome',
5
        'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.2/css/all.min.css',
6
        array(),
7
        '6.7.2'
8
    );
9
}

Denne hooken henter gratisversjonen fra cdnjs CDN, det mest pålitelige offentlige CDN-et for FA 6. Tallet 6.7.2 er versjonen per juni 2026; sjekk gjeldende versjon på cdnjs-pakkesiden og bytt til den nyeste.

Alternativ: Kit fra Font Awesome

Kit gir tilgang til Pro-ikoner og laster automatisk bare stilene som brukes på siden, noe som gir færre unødvendige kilobyte.

Registrer deg på Font Awesome-nettstedet, opprett et Kit, kopier innbyggingskoden og lim den inn i header.php i child theme-et ditt før </head>:

1
<script src="https://kit.fontawesome.com/YOUR_CODE.js" crossorigin="anonymous"></script>

Ulempen med Kit er at gratisversjonen er begrenset til 10 000 sidevisninger per måned. For et nettsted med høyere trafikk bør du bruke enten CDN eller Pro.

Den innebygde temaredigereren (Utseende → Temafilredigering) lar deg redigere functions.php direkte fra administrasjonspanelet. Det er imidlertid tryggere å jobbe via FTP eller en filbehandler hos hostingleverandøren: en skrivefeil i PHP-kode knekker nettstedet, og uten filtilgang har du ingen mulighet til å gjenopprette det.

Metode 3: via Elementor eller et annet page builder-verktøy

Hvis du allerede bruker Elementor, trenger du ikke et eget Font Awesome-plugin; sidebyggeren inkluderer biblioteket ut av boksen.

I enhver widget med et ikon (Ikon, Ikonboks, Ikonliste), klikk på ikonet så åpnes et bibliotek med søk på tvers av alle Free-stiler. Farge, størrelse, skygge og hover-effekter konfigureres i sidepanelet uten en eneste linje CSS.

Det samme gjelder for SeedProd, Beaver Builder og Divi. Sjekk innstillingene til sidebyggeren din: nesten alle populære visuelle byggere for WordPress inkluderer allerede Font Awesome i kjernen.

Slik endrer du ikonstiler

Etter at du har koblet til Font Awesome, styrer du ikoner utelukkende gjennom klasser og CSS. Direkte redigering av SVG-filer er ikke nødvendig.

Størrelse

Ikonstørrelse angis ved hjelp av ferdige klasser. Én klasse gjør ikonet en tredjedel større, en annen dobler det, en tredje tredobler det, og så videre opp til tidobling. Se nøyaktige verdier for alle klasser på Font Awesome-nettstedet.

Eksempel på et ikon tredoblet i størrelse:

Eksempel på et ikon tredoblet i størrelse:

1
<i class="fa-solid fa-download fa-3x"></i>

Rotasjon og speiling

• fa-rotate-90, 90° rotasjon
• fa-rotate-180, 180° rotasjon
• fa-rotate-270, 270° rotasjon
• fa-flip-horizontal, horisontal speiling
• fa-flip-vertical, vertikal speiling

Animasjon

To alternativer, begge via klasser:

• fa-spin, jevn rotasjon (egnet for lastespinnere)
• fa-pulse, rotasjon i åtte trinn (pulserende effekt)

1
<i class="fa-solid fa-spinner fa-spin"></i>

Farge

Ikonfarge arves fra den overordnede teksten. For å angi din egen, bruk en CSS-regel:

1
.fa-download {
2
    color: #27ae60;
3
}

Den enkleste måten å legge til slik CSS på er via Utseende → Tilpass → Ekstra CSS. Endringer trer i kraft umiddelbart og er synlige i sanntid.

Ikon via pseudoelement

Når et ikon skal festes til et element uten ekstra markup, bruk ::before eller ::after i CSS:

1
.external-link::after {
2
    content: "\f08e";
3
    font-family: "Font Awesome 6 Free";
4
    font-weight: 900;
5
    margin-left: 6px;
6
}

Koden \f08e er Unicode-identifikatoren for ikonet. Du finner den på det aktuelle ikonets side på fontawesome.com, der det er oppført med navn.

Hvor du får tak i ikoner

Gå til fontawesome.com/icons, skriv et søkeord i søkefeltet og velg en stil. På ikonets side finner du HTML-snutten, Unicode og en liste over tilgjengelige stiler. Kopier og lim inn der det trengs.

En merknad om videoopplæringen

Hvis du foretrekker å se fremfor å lese, finner du her en opplæring i hvordan du legger til Font Awesome-ikoner i en WordPress-meny:

Etter at du har sett den, kan du komme tilbake til teksten: nedenfor finner du nyanser som ikke dekkes i videoen.

⁉️🤔 Ofte stilte spørsmål

Må jeg betale for Font Awesome?

Gratisversjonen dekker behovene til de aller fleste nettsteder: 2000+ ikoner i fem stiler, inkludert merkevareikoner (Facebook, Twitter, Instagram og hundrevis av andre). Pro koster fra $60 per år og legger til Thin, Light, Sharp-familiene, Duotone i alle stiler og muligheten til å laste opp egne SVG-er. Det lønner seg å betale hvis du selger ikoner som en del av et produkt eller du spesifikt trenger duotones. Font Awesome-pluginen på WordPress.org er helt gratis; Pro-ikoner kobles til via API Token i de samme plugin-innstillingene, og du trenger ikke kjøpe eller installere noe separat.

Hvilken tilkoblingsmetode bør jeg velge?

For nybegynnere og typiske nettsteder: den offisielle pluginen. Den installeres med to klikk, har innebygd ikonsøk i editoren og en konfliktskanner. Manuell installasjon via CDN er forsvarlig hvis du minimerer antall pluginer på nettstedet og vet nøyaktig hvilken fil du skal legge til wp_enqueue_style i. Kit fra Font Awesome er et kompromiss: enkelt å koble til uten plugin, men med en gratis grense på 10 000 visninger.

Hva bør jeg gjøre hvis ikoner ikke vises?

Kjør først Conflict Detection Scanner i Font Awesome-pluginens innstillinger. Oftest er problemet at temaet eller en annen plugin laster sin egen versjon av Font Awesome, noe som forårsaker en versjonskonflikt. Skanneren finner konfliktkilden, og pluginen vil tilby å blokkere den. Det nest vanligste tilfellet er en syntaksfeil: sjekk at du bruker prefikset fa-solid og ikke fa (som er syntaks fra den gamle versjon fire).

Kan jeg bruke Font Awesome uten WordPress?

Ja, Font Awesome er ikke knyttet til WordPress. Koble til CDN-lenken i <head> på et hvilket som helst HTML-dokument og sett inn ikoner med <i class="fa-solid fa-name"></i>-taggen. Det fungerer med React, Vue, Laravel, ren HTML og til og med PDF-generatorer. På fontawesome.com/docs finnes det instruksjoner for et titalls plattformer.

Hvorfor er Font Awesome bedre enn andre ikonbiblioteker?

To hovedargumenter: fellesskapets størrelse og kompatibilitet. Font Awesome brukes av millioner av nettsteder, så dokumentasjonen er oversatt til et titalls språk, og svar på eventuelle problemer kan du finne på sekunder via søk. For det andre: den offisielle WordPress-pluginen med automatisk konfliktløsning, noe verken Material Icons eller Bootstrap Icons tilbyr.

Er det verdt innsatsen: hva du bør velge for din oppgave

Hvis du har lest så langt, vil tabellen nedenfor spare deg for tid:

Sjekk at ikonene vises korrekt i ulike nettlesere og på mobile enheter etter tilkobling. Hvis du opplever flimring eller ikonbytte, kjør konfliktskanneren fra «Feilsøk»-delen i plugin-innstillingene. Problemet er nesten alltid løst med ett klikk.