🚀 Så här krymper du Font Awesome till 10 KB och snabbar upp din webbplats
Ikoner gör webbplatser intuitiva. Navigation, sociala medier, åtgärdsknappar: överallt behöver du små visuella ledtrådar som besökaren känner igen direkt. Font Awesome har löst detta problem i 14 år med ett bibliotek på över 2000 gratisikoner som du kopplar in med en enda rad. Problemet är att den raden drar med sig hundratals kilobyte.
Hela Font Awesome 7 Free-paketet väger cirka 150 KB per stil enbart för webfontfilerna, utan CSS. Lägg till CSS (ytterligare ~100 KB minifierad), och varje första sidladdning levererar 250+ KB till användaren. Värre: om du använder 8-10 ikoner av tvåtusen laddar webbläsaren ändå ner allt. På mobilt 4G innebär det 2-3 extra sekunders väntan. Google PageSpeed straffar sådana nyttolaster med ett direkt poängavdrag.
Men problemet går att lösa. Vi visar hur du bara extraherar de ikoner som faktiskt används på din sajt från biblioteket och får en slutlig storlek på 10-15 KB utan att förlora funktionalitet. Alla metoder täcks: från automatiska till manuella, från onlineverktyg till CLI-verktyg. Ingen magi, bara fungerande tekniker.
💡 Snabb översikt:
- Analysera din sajt och sammanställ en lista över de Font Awesome-ikoner som faktiskt används
- Välj optimeringsmetod för din situation: onlineverktyget FontCut, CLI-verktyget fa-subset eller den officiella Kit-mekanismen
- För maximal kontroll, ta den manuella vägen via FontForge eller IcoMoon: det kräver ansträngning men ger dig fullständig kontroll över slutfilen
- Generera den trimmade webfonten och CSS:en, ersätt den fullständiga versionen på din server med dem
- Mät hastighet före och efter: typisk förbättring av PageSpeed Score är 20-40 poäng
Varför trimma Font Awesome överhuvudtaget?
Huvudskälet är laddningshastighet. En Google-studie visar att 53% av mobila besökare lämnar en sida om den tar längre än 3 sekunder att ladda. Varje extra 100 KB i den kritiska renderingsvägen ökar tiden till First Contentful Paint.
Font Awesome Free 7 innehåller tre stilar: Solid, Regular och Brands. Tillsammans blir det över 2000 ikoner och cirka 450 KB komprimerade webfontfiler. En typisk landningssida eller blogg använder 10-20 ikoner, mindre än 1% av biblioteket. Webbläsaren laddar ner allt annat i onödan.
Det andra skälet är Core Web Vitals. Måttet LCP (Largest Contentful Paint) beror direkt på hur snabbt webbläsaren tar emot och renderar typsnitt. En otrimmad Font Awesome blockerar textrendering tills webfonten laddats. Efter subsetting blir filen tillräckligt liten för att webbläsaren ska ta emot den inom den första nätverksbegäran.
Det tredje skälet är mobiltrafik. Användare med begränsad dataplan tackar dig inte för extra 400 KB på varje sida. Subsetting ger dig tillbaka kontrollen över din laddningsbudget.
Verkliga siffror: att minska en webfontfil från 345 KB till 14,5 KB höjde Lighthouse Performance Score från 52 till 89 poäng i ett projekt. Skillnaden syns med blotta ögat: sidan blir interaktiv nästan omedelbart.
Metod 1: officiell Kit-mekanism (rekommenderas)
Den enklaste och mest stödda metoden är att använda ett Font Awesome Kit med inbyggd subsetting. Denna metod fungerar med ett gratiskonto och kräver inga tredjepartsverktyg.
Så fungerar det
Ett Kit är ett personligt Font Awesome-paket som du konfigurerar i din dashboard på fontawesome.com. I Kit-inställningarna finns en sektion "Icon Selection" med två lägen:
- By Style: du kryssar i de stilar du behöver (Solid, Regular, Brands), och Kit:et laddar bara de valda. Redan i detta steg kapar du två av tre stilar om du bara behöver Solid.
- By Icon: du anger specifika ikoner via sökning, och Kit:et genererar en fil som bara innehåller dem. Detta läge ger maximal komprimering.
Efter att du sparat inställningarna bygger Kit:et automatiskt om paketet. Du får en <script>-tagg att infoga i din sajts <head>. Font Awesome CDN levererar den redan trimmade versionen. Inga lokala filer, inget manuellt bygge.
Fördelar med Kit-metoden
- Inget behov av att ladda ner och hosta filer: Font Awesome CDN distribuerar det trimmade paketet globalt
- När du lägger till en ny ikon uppdaterar du bara listan i Kit-inställningarna, och ombyggnad sker automatiskt
- Fungerar med Font Awesome Pro, inklusive Duotone- och Sharp-stilarna
- Stöder både SVG+JS- och Webfonts+CSS-lägen
När ett Kit inte passar
Den enda begränsningen: ett trimmat Kit kan inte laddas ner till din egen server på gratisnivån. Om lokal hosting av typsnitt är avgörande för dig (internt nätverk, säkerhetspolicy) är ett Kit inget alternativ. Titta då på metod 2 och 3.
Metod 2: onlineverktyget FontCut
Om du inte vill registrera dig hos Font Awesome eller föredrar en färdig ZIP-fil du kan lägga i ditt repository, prova FontCut.com. Det är en gratis onlinegenerator specifikt utformad för Font Awesome 6.4.0 och Bootstrap Icons.
Processen har tre steg:
- Välj ett ikonpaket (Font Awesome Free 6.4.0, den senaste tillgängliga versionen)
- Kryssa i de ikoner du behöver i det visuella rutnätet
- Ladda ner ett ZIP-arkiv med CSS- och webfontfiler, ladda upp till din server
Resultatet är ett fristående 10-15 KB-paket som du hostar själv. Verktyget kräver ingen registrering, och förhandsvisningen visar den slutliga storleken i realtid.
Begränsning: FontCut använder FA 6.4.0, inte den aktuella versionen 7.2.0. För de flesta projekt är skillnaden försumbar: ikoner i solid-stil ändras inte mellan versioner. Men om du behöver ikoner som lagts till i FA 7 (Pro+-paket) kommer FontCut inte att erbjuda dem.
Metod 3: CLI-verktyget fa-subset (för utvecklare)
Automatisk detektering av använda ikoner är den mest precisa metoden. Verktyget fa-subset (Python, BSD-2-Clause, instruktioner på Dev.to) skannar ditt projekts källkod, hittar alla fa-*-klasser och genererar en trimmad webfont som bara innehåller de ikoner som faktiskt används.
Installation:
1 pip install fonttools
Grundläggande körning (torrkörning för analys):
1 python3 bin/fa-subset.py \ 2 --src ./src ./templates \ 3 --ext .html .php .twig .js \ 4 --pack solid:css=./css/fontawesome.min.css,font=./fonts/fa-solid-900.ttf \ 5 --out ./optimised \ 6 --dry-run
Verktyget visar en lista över hittade ikoner och den förväntade storleken på den trimmade filen. Utan flaggan --dry-run genererar det färdig CSS och webfont i mappen ./optimised.
Styrkor hos fa-subset:
- Skannar PHP, HTML, JS, Blade, Twig, Vue, React och alla textfiler i ditt projekt
- Förstår duotone-ikoner (dubbla kodpunkter i Font Awesome 6+)
- Kan skapa en JSON-rapport för CI/CD-pipelines:
--report-json ./report.json --strict-styles - Fungerar med WordPress-teman, Laravel-mallar och React/Vue-komponenter
Verkligt produktionsresultat: komprimering från 803 KB (typsnitt + CSS) till 14,5 KB, en minskning med 98%. Verktyget är gratis och inte knutet till Font Awesomes tjänster.
Metod 4: IcoMoon (visuell typsnittsbyggare)
IcoMoon är en webbapplikation för att skapa anpassade ikonfonter. Den finns på icomoon.io/app. Tillvägagångssättet är något mer komplext än Kits men erbjuder en unik möjlighet: att blanda ikoner från olika bibliotek i en enda fil.
Steg 1: välj Font Awesome-paketet
Gå till icomoon.io/app, klicka på "Add Icons From Library", hitta Font Awesome i listan och klicka på "Add".
Steg 2: markera de ikoner du behöver
I urvalsfönstret markerar du alla ikoner som används på din webbplats genom att klicka på var och en. Du kan välja flera bibliotek samtidigt (till exempel Font Awesome + Material Icons) och få en enda fil med ikoner från båda uppsättningarna.
Steg 3: generera och ladda ner typsnittet
Efter urvalet klickar du på knappen "Generate Font" längst ner på sidan. IcoMoon visar alla valda ikoner och ger en "Download"-knapp. ZIP-arkivet innehåller webfontfiler (woff, woff2, eot, svg, ttf), en style.css-fil och en demo demo.html.
Spara filerna i ditt webbprojekts repo och länka in style.css i <head>. Om något gick fel, öppna demo.html från arkivet: den visar exakt hur typsnittet kopplas in och används.
IcoMoon fungerar bra när du behöver blanda ikoner från olika uppsättningar eller när du i grunden inte vill vara beroende av Font Awesomes CDN.
Metod 5: manuell trimning via FontForge
Den mest arbetsintensiva men också mest kontrollerade metoden. Den passar när du vill förstå varje byte i den slutliga filen eller arbetar i en miljö utan tillgång till externa tjänster.
Steg 1: lokalisera typsnittet
Ladda ner Font Awesome från den officiella webbplatsen. Ta bort CDN-länken från <head> om den fanns där. Packa upp arkivet i ditt webbprojekts repo.
Anslut CSS lokalt:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Rensa webbläsarens cache och ladda om sajten. Ikonerna ska visas som tidigare, men nu kontrollerar du filerna på din server.
Steg 2: ta bort onödiga filer
Efter uppackning av Font Awesome-arkivet ser du mappstrukturen:
Endast CSS- och webfont-filer behövs för drift. Moderna webbläsare behöver bara woff2-formatet, så ttf-, eot- och svg-filer kan raderas.
Radera Less- och SCSS-källfiler om du inte planerar att kompilera dem. Behåll endast css/ och fonts/ med filen fa-solid-900.woff2 (eller motsvarande för din version).
Steg 3: redigera webfonten i FontForge
Ladda ner och installera FontForge (en gratis typsnittseditor med öppen källkod). Öppna .woff2-filen via Arkiv → Öppna.
I FontForges gränssnitt, leta upp glyfpanelen. För att slippa bläddra manuellt, gå till Encoding → Compact: alla upptagna positioner flyttas till början.
Nu den mest kritiska delen: håll ner Shift och markera alla glyfer din sajt INTE använder. Radera dem (Edit → Clear). Behåll endast ikoner som faktiskt finns i din markup: sociala medier, pilar, menyikoner, varumärkeslogotyper.
Spara resultatet: Arkiv → Generate Fonts. Välj Web Open Font Format (woff2) och ange filnamnet. Ersätt den ursprungliga webfonten i fonts/-mappen med den trimmade versionen.
Ladda om sajten och kontrollera alla ikoner. Om någon försvann raderade du en glyf som behövs: öppna FontForge igen och upprepa markeringen mer noggrant.
Eller kanske bara byta bibliotek?
Ibland är den bästa optimeringen inte att optimera Font Awesome utan att välja ett verktyg som är lättare från början. Moderna alternativ levererar ikoner i SVG-format med tree-shaking på importnivå: endast ikonerna du explicit importerar hamnar i bunten.
Tre alternativ värda att överväga:
Lucide Icons: 1460+ ikoner, MIT-licens, direkt efterföljare till Feather Icons. Ikoner på ett 24px-rutnät, stilmässigt nära FA, men paketet väger bara några kilobyte med tree-shaking. För React/Vue/Svelte finns inbyggda komponenter med props för
size,colorochstrokeWidth.Phosphor Icons: 1400+ ikoner i sex stilar (thin, light, regular, bold, fill, duotone). Varje ikon importeras individuellt:
import { House } from '@phosphor-icons/react'. Ingen oanvänd ballast.Bootstrap Icons: 2000+ SVG-ikoner, gratis, aktivt utvecklade. Direkt kompatibilitet med Bootstrap-ekosystemet, men kan användas fristående. Separata SVG-filer gör att ikoner kan bäddas in inline utan extra anrop.
Om din webbplats körs på WordPress, kolla in vår guide om att lägga till Font Awesome i WordPress. För dig som vill gräva djupare i webbtypsnitt finns en genomgång av att ladda webbtypsnitt utan att blockera renderingen.
⁉️🤔 Vanliga frågor
Vad är ikonsubsetting och varför behövs det?
Subsetting är processen att skapa en nedbantad version av ett ikonteckensnitt som bara innehåller de ikoner som faktiskt används på webbplatsen. Hela Font Awesome 7 Free-paketet väger cirka 450 KB i komprimerade webbtypsnittsfiler. En typisk webbplats använder 10-20 ikoner; efter subsetting krymper filen till 10-15 KB. Skillnaden i laddningstid syns direkt i PageSpeed Score: typisk förbättring är 20-40 poäng.
Hur många ikoner laddar webbläsaren om jag kopplade in Font Awesome via CDN?
Alla. En CDN-länk till
all.min.cssdrar in hela uppsättningen av tre stilar: Solid, Regular och Brands. Webbläsaren laddar alla webbtypsnittsfiler även om bara en ikon används på sidan. Det är precis därför CDN-metoden utan ett Kit är den mest byteskrävande. Ett Kit med inställningen "By Icon" löser problemet: CDN:n levererar bara de ikoner du uttryckligen valt i inställningarna.
Vilken optimeringsmetod ska jag välja för en WordPress-webbplats?
Om din webbplats körs på WordPress och du inte vill hantera CLI, använd det officiella Kit:et (metod 1). Installationen tar 5 minuter i instrumentpanelen på fontawesome.com, och resultaten levereras direkt via CDN. Om säkerhetspolicyn förbjuder CDN fungerar FontCut (metod 2): ladda ner ZIP-filen, ladda upp via FTP, koppla in i
header.php. För utvecklare som vill ha automatisering kan fa-subset (metod 3) skanna dina temamallar i PHP och bygga om teckensnittet vid varje deploy.
Är det säkert att ta bort webbtypsnittsformaten ttf, eot och svg?
Ja. Moderna webbläsare (Chrome, Firefox, Safari, Edge) har stött woff2 sedan 2016. Enligt data från Can I Use täcker stödet 98%+ av den globala webbläsarmarknaden. Formatet woff2 ger bättre komprimering (i genomsnitt 30% mer kompakt än woff). Filerna eot (behövs bara för IE8), ttf och svg kan tryggt raderas från typsnittsmappen. Behåll bara woff2, och om du behöver stöd för gamla Safari på iOS 12 och äldre, lägg till woff som fallback.
Är det värt att använda Font Awesome överhuvudtaget 2026?
Det beror på projektet. Om du redan har Font Awesome implementerat och använder 5-10 ikoner löser subsetting (valfri metod ovan) viktproblemet på en timme. Om projektet är nytt och du väljer bibliotek från grunden, överväg Lucide eller Phosphor: de är byggda kring tree-shaking från start och ger noll overhead. Font Awesome är fortfarande ledande i fråga om ikonekosystemets mängd och integrationer, men dess viktkostnad utan subsetting är högre än moderna SVG-alternativ.
Är det värt att bry sig om några dussin kilobyte?
Definitivt ja. Varje ooptimerad kilobyte på den kritiska renderingsvägen minskar konverteringen direkt. Amazon räknade ut att 100 ms laddningsfördröjning kostar 1% i försäljning. Google straffar långsamma sidor i mobila sökresultat. Det här är inte perfektionism; det är direkt ekonomi.
Välj metod för din situation:
- Minsta ansträngning: Kit med inställningen By Icon. 5 minuter, resultat direkt på CDN.
- Lokal hosting, inga registreringar: FontCut. 10 minuter, ZIP på din server.
- CI/CD-automatisering: fa-subset. Skannar kod, bygger om vid deploy.
- Full kontroll: FontForge eller IcoMoon. Tar längre tid, men du känner till varje glyf.
Att minska från 450 KB till 15 KB förändrar hastighetsupplevelsen dramatiskt. Testa på ett projekt, mät PageSpeed före och efter. Resultatet talar för sig självt.
Ett professionellt team av skribenter och redaktörer specialiserade på att skapa kvalitetsinnehåll.