En webbplats utan ikoner ser ut som en textvägg från 2005. Men att rita ikoner i Photoshop och mixtra med sprites är inget vidare, särskilt inte om du inte är designer.

Font Awesome har löst det här problemet sedan 2012: det är ett gratis bibliotek med över 2000 vektorikoner som beter sig som vanlig text. Ändra färgen i CSS så ändrar ikonen färg. Öka teckenstorleken så skalas den utan pixelering eller oskärpa.

I praktiken räcker gratisversionen för menyer, knappar och sociala medier. Behöver du duotone och över 30 000 ikoner finns Pro från $60 per år. Här är tre sätt att lägga till Font Awesome i WordPress: från det enklaste till manuell installation för dig som inte är rädd för functions.php.

💡 Snabb översikt:

• Installera det officiella Font Awesome-tillägget från WordPress-katalogen; det tar en minut och kräver inga kodändringar
• För manuell kontroll, anslut Font Awesome via CDN eller Kit i functions.php i ditt barntema
• Om du använder Elementor är ikoner redan inbyggda och inget separat tillägg behövs
• Efter anslutning ändrar du ikonstorlek, färg och animering via CSS eller färdiga klasser

Vad är Font Awesome

Font Awesome är ett ikonfont: istället för bokstäver innehåller det ikonsymboler. Webbläsaren renderar dem som vektorgrafik, så kanterna förblir skarpa på alla skärmar och i alla skalor. Inga PNG:er, sprites eller srcset.

Biblioteket är uppdelat i två delar. Gratisversionen innehåller fem stilar: Solid, Regular, Brands, Duotone och Sharp. Pro lägger till Thin, Light och tiotusentals ikoner, plus möjligheten att ladda upp egna SVG:er via Kit. För en typisk visitkortssajt eller blogg täcker Free de allra flesta behov: pilar, sociala medier, sök, varukorg, kryssrutor.

Den främsta fördelen jämfört med rasterikoner är full kontroll via CSS. Färg, storlek, skugga, rotation, animering: allt sätts med klasser utan någon grafisk redigering.

Metod 1: officiellt tillägg (rekommenderas)

Den säkraste vägen är att installera det officiella Font Awesome-tillägget på WordPress.org. Det ges ut av samma team som skapar själva biblioteket. Tillägget uppdateras i takt med nya ikonversioner och är inte beroende av ditt tema.

Så här installerar du:

Gå till Tillägg → Lägg till nytt. Skriv "font awesome" i sökfältet och tryck på Enter.

Klicka på Installera nu, sedan på Aktivera.

Klart. Efter aktivering visas ett Font Awesome-alternativ i menyn Inställningar där du kan byta ikonkälla (CDN eller Kit), aktivera kompatibilitet med version fyra och köra konfliktskannern.

Tillägget lägger till ett separat "Font Awesome Icon"-block i blockredigeraren. Klicka på det så öppnas en sökning i hela biblioteket. Välj en ikon, klicka på "Infoga" så visas den i texten som SVG. Styling görs direkt i blockets sidopanel: storlek, färg, rotation.

För den klassiska redigeraren fungerar en shortcode:

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

Eller ren HTML:

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

Om du har ett Pro-konto, skapa ett Kit på fontawesome.com, kopiera API-token och klistra in den i plugin-inställningarna. Därefter visar ikonväljaren även Pro-ikoner.

Metod 2: manuell installation via functions.php

Den här metoden är för dig som vill ha kontroll över varje resurs som laddas på sajten eller undvika extra plugins. Den görs via ett barntema så att en uppdatering av huvudtemat inte raderar dina ändringar.

Skapa ett barntema

Skapa en katalog med suffixet -child i mappen wp-content/themes/ (till exempel astra-child). Skapa två filer i den.

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å till Utseende → Teman och aktivera barntemat.

Anslut Font Awesome via CDN

Lägg till den här koden i barntemats functions.php:

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
}

Denna hook hämtar gratisversionen från cdnjs CDN, den mest pålitliga publika CDN:n för FA 6. Siffran 6.7.2 är versionen från juni 2026; kontrollera aktuell version på cdnjs paketsida och ersätt med den senaste.

Alternativ: Kit från Font Awesome

Kit ger tillgång till Pro-ikoner och laddar automatiskt bara de stilar som används på sidan, vilket ger färre onödiga kilobyte.

Registrera dig på Font Awesome-webbplatsen, skapa ett Kit, kopiera inbäddningskoden och klistra in den i barntemats header.php före </head>:

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

Nackdelen med Kit är att gratisnivån är begränsad till 10 000 sidvisningar per månad. För en sajt med högre trafik, använd antingen CDN eller Pro.

Den inbyggda temaredigeraren (Utseende → Temafilredigerare) låter dig redigera functions.php direkt från adminpanelen. Det är dock säkrare att arbeta via FTP eller en filhanterare hos webbhotellet: ett skrivfel i PHP-kod knäcker sajten, och utan filåtkomst har du ingen möjlighet att återställa den.

Metod 3: via Elementor eller en annan sidbyggare

Om du redan använder Elementor behöver du inget separat Font Awesome-plugin; sidbyggaren inkluderar biblioteket direkt.

I alla widgetar med en ikon (Ikon, Ikonlåda, Ikonlista) klickar du på ikonen så öppnas ett bibliotek med sökning över alla Free-stilar. Färg, storlek, skugga och hover-effekter ställer du in i sidopanelen utan en enda rad CSS.

Detsamma gäller för SeedProd, Beaver Builder och Divi. Kolla inställningarna i din sidbyggare: nästan alla populära visuella byggare för WordPress har redan Font Awesome inbyggt.

Så ändrar du ikonstilar

När du har kopplat in Font Awesome styr du ikoner enbart via klasser och CSS. Du behöver inte redigera SVG-filer direkt.

Storlek

Ikonstorlek sätts med färdiga klasser. En klass gör ikonen en tredjedel större, en annan dubblerar den, en tredje tredubblar den, och så vidare upp till tio gångers ökning. Exakta värden för alla klasser hittar du på Font Awesomes webbplats.

Exempel på en ikon som tredubblats i storlek:

Exempel på en ikon som tredubblats i storlek:

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

Rotation och spegling

• fa-rotate-90, 90° rotation
• fa-rotate-180, 180° rotation
• fa-rotate-270, 270° rotation
• fa-flip-horizontal, horisontell spegling
• fa-flip-vertical, vertikal spegling

Animation

Två alternativ, båda via klasser:

• fa-spin, mjuk rotation (passar för laddningssnurror)
• fa-pulse, åttastegsrotation (pulserande effekt)

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

Färg

Ikonens färg ärvs från den överordnade texten. För att sätta en egen använder du en CSS-regel:

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

Det enklaste sättet att lägga till sådan CSS är via Utseende → Anpassa → Extra CSS. Ändringar slår igenom direkt och visas i realtid.

Ikon via pseudoelement

När en ikon ska fästas på ett element utan extra markup använder du ::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 är ikonens Unicode-identifierare. Du hittar den på den specifika ikonens sida på fontawesome.com, där den listas under namnet.

Var du hittar ikoner

Öppna fontawesome.com/icons, skriv ett sökord i sökfältet och välj en stil. På ikonens sida hittar du HTML-snutten, Unicode och en lista över tillgängliga stilar. Kopiera och klistra in där det behövs.

En notering om videoguiden

Om du föredrar att titta framför att läsa, här är en guide för att lägga till Font Awesome-ikoner i en WordPress-meny:

Kom tillbaka till texten efter att du har tittat: nedan finns nyanser som inte tas upp i videon.

⁉️🤔 Vanliga frågor

Behöver jag betala för Font Awesome?

Gratisversionen täcker behoven för de allra flesta sajter: 2000+ ikoner i fem stilar, inklusive varumärkesikoner (Facebook, Twitter, Instagram och hundratals andra). Pro kostar från $60 per år och lägger till Thin, Light, Sharp-familjerna, Duotone i alla stilar samt möjlighet att ladda upp egna SVG:er. Att betala är vettigt om du säljer ikoner som en del av en produkt eller specifikt behöver duotone-ikoner. Font Awesome-pluginet på WordPress.org är helt gratis; Pro-ikoner ansluts via API-token i samma plugin-inställningar, och du behöver inte köpa eller installera något separat.

Vilken anslutningsmetod bör jag välja?

För nybörjare och typiska sajter: det officiella pluginet. Det installeras med två klick, har inbyggd ikonsökning i redigeraren och en konfliktskanner. Manuell installation via CDN är motiverad om du minimerar antalet plugin på din sajt och vet exakt i vilken fil du ska lägga till wp_enqueue_style. Kit från Font Awesome är en kompromiss: enkelt att ansluta utan plugin, men med en gratisgräns på 10 000 visningar.

Vad ska jag göra om ikoner inte visas?

Kör först konfliktskannern i Font Awesome-plugins inställningar. Oftast beror problemet på att temat eller ett annat plugin laddar sin egen version av Font Awesome, vilket orsakar en versionskonflikt. Skannern hittar konfliktkällan och pluginet erbjuder sig att blockera den. Det näst vanligaste fallet är ett syntaxfel: kontrollera att du använder prefixet fa-solid och inte fa (vilket är syntax från den gamla version fyra).

Kan jag använda Font Awesome utan WordPress?

Ja, Font Awesome är inte bundet till WordPress. Anslut CDN-länken i <head> på vilket HTML-dokument som helst och infoga ikoner med taggen <i class="fa-solid fa-name"></i>. Det fungerar med React, Vue, Laravel, ren HTML och till och med PDF-generatorer. På fontawesome.com/docs finns instruktioner för ett dussin plattformar.

Varför är Font Awesome bättre än andra ikonbibliotek?

Två huvudargument: communityns storlek och kompatibilitet. Font Awesome används av miljontals sajter, så dokumentationen är översatt till ett dussin språk och svar på eventuella problem hittas på sekunder via sökning. För det andra: det officiella WordPress-pluginet med automatisk konfliktlösning, vilket varken Material Icons eller Bootstrap Icons erbjuder.

Är det värt besväret: vad du ska välja för din uppgift

Om du har läst så här långt kommer tabellen nedan att spara tid åt dig:

Kontrollera att ikonerna visas korrekt i olika webbläsare och på mobila enheter efter anslutning. Om du märker flimmer eller ikonbyte, kör konfliktskannern från avsnittet "Felsökning" i plugin-inställningarna. Problemet löses nästan alltid med en knapptryckning.