🚀 Slik krymper du Font Awesome til 10 KB og gjør nettsiden din raskere
Ikoner gjør nettsider intuitive. Navigasjon, sosiale medier, handlingsknapper: overalt trenger du små visuelle signaler som besøkende gjenkjenner umiddelbart. Font Awesome har løst dette problemet i 14 år med et bibliotek på over 2000 gratisikoner som du kobler til med én enkelt linje. Problemet er at den ene linjen drar med seg hundrevis av kilobyte.
Hele Font Awesome 7 Free-pakken veier omtrent 150 KB per stil bare for webfont-filene, uten CSS. Legg til CSS (ytterligere ~100 KB minifisert), og hver første sideinnlasting leverer 250+ KB til brukeren. Verre: hvis du bruker 8-10 ikoner av to tusen, laster nettleseren likevel ned alt. På mobilt 4G-nett betyr det 2-3 ekstra sekunders venting. Google PageSpeed straffer slike datamengder med et direkte poengtrekk.
Men problemet kan løses. Vi skal vise deg hvordan du trekker ut bare ikonene som faktisk brukes på nettstedet ditt fra biblioteket og oppnår en endelig størrelse på 10-15 KB uten å miste funksjonalitet. Alle metoder dekkes: fra automatisk til manuell, fra nettbaserte verktøy til CLI-verktøy. Ingen magi, bare teknikker som virker.
💡 Rask oversikt:
- Analyser nettstedet ditt og lag en liste over Font Awesome-ikonene som faktisk er i bruk
- Velg optimaliseringsmetoden som passer din situasjon: nettverktøyet FontCut, CLI-verktøyet fa-subset eller den offisielle Kit-mekanismen
- For maksimal kontroll, ta den manuelle ruten via FontForge eller IcoMoon: det krever innsats, men gir deg full kontroll over sluttfilen
- Generer den trimmede webfonten og CSS-en, erstatt fullversjonen på serveren din med dem
- Mål hastighet før og etter: typisk forbedring av PageSpeed-poengsum er 20-40 poeng
Hvorfor trimme Font Awesome i det hele tatt?
Hovedgrunnen er lastehastighet. En Google-studie viser at 53% av mobilbesøkende forlater en side hvis den bruker mer enn 3 sekunder på å laste. Hver ekstra 100 KB på den kritiske renderingsstien øker tiden til First Contentful Paint.
Font Awesome Free 7 inneholder tre stiler: Solid, Regular og Brands. Til sammen utgjør det over 2000 ikoner og omtrent 450 KB med komprimerte webfont-filer. En typisk landingsside eller blogg bruker 10-20 ikoner, mindre enn 1% av biblioteket. Nettleseren laster ned alt annet til ingen nytte.
Den andre grunnen er Core Web Vitals. LCP-målingen (Largest Contentful Paint) avhenger direkte av hvor raskt nettleseren mottar og renderer fonter. En utrimmet Font Awesome blokkerer tekstrendering til webfonten er lastet. Etter subsetting blir filen liten nok til at nettleseren mottar den innen den første nettverksforespørselen.
Den tredje grunnen er mobiltrafikk. Brukere med begrensede datapakker vil ikke takke deg for ekstra 400 KB på hver side. Subsetting gir deg tilbake kontrollen over lastebudsjettet ditt.
Reelle tall: å redusere en webfont-fil fra 345 KB til 14,5 KB løftet Lighthouse Performance Score fra 52 til 89 poeng på ett prosjekt. Forskjellen er synlig for det blotte øye: siden blir interaktiv nesten umiddelbart.
Metode 1: offisiell Kit-mekanisme (anbefalt)
Den enkleste og mest støttede tilnærmingen er å bruke et Font Awesome Kit med innebygd subsetting. Denne metoden fungerer med en gratiskonto og krever ingen tredjepartsverktøy.
Slik fungerer det
Et Kit er en personalisert Font Awesome-pakke som du konfigurerer i kontrollpanelet ditt på fontawesome.com. I Kit-innstillingene finnes en «Icon Selection»-seksjon med to moduser:
- Etter stil: du krysser av for stilene du trenger (Solid, Regular, Brands), og Kitet laster bare de valgte. Allerede i dette steget kutter du to av tre stiler hvis du bare trenger Solid.
- Etter ikon: du angir bestemte ikoner via søk, og Kitet genererer en fil som bare inneholder dem. Denne modusen gir maksimal komprimering.
Etter at du har lagret innstillingene, bygger Kitet automatisk pakken på nytt. Du får en <script>-tagg du setter inn i nettstedets <head>. Font Awesome CDN leverer den allerede trimmede versjonen. Ingen lokale filer, ingen manuell bygging.
Fordeler med Kit-tilnærmingen
- Du slipper å laste ned og hoste filer: Font Awesome CDN distribuerer den trimmede pakken globalt
- Når du legger til et nytt ikon, oppdaterer du bare listen i Kit-innstillingene, så skjer gjenoppbyggingen automatisk
- Fungerer med Font Awesome Pro, inkludert Duotone- og Sharp-stiler
- Støtter både SVG+JS- og Webfonts+CSS-modus
Når et Kit ikke passer
Den eneste begrensningen: et trimmet Kit kan ikke lastes ned til din egen server på gratisnivået. Hvis det å hoste fonter lokalt er kritisk for deg (internt nettverk, sikkerhetspolicy), er et Kit ikke et alternativ. Se da på metode 2 og 3.
Metode 2: nettverktøyet FontCut
Hvis du ikke vil registrere deg hos Font Awesome eller foretrekker en ferdig ZIP-fil du kan legge i repositoriet ditt, prøv FontCut.com. Det er en gratis nettbasert generator spesielt utviklet for Font Awesome 6.4.0 og Bootstrap Icons.
Prosessen har tre trinn:
- Velg et ikonsett (Font Awesome Free 6.4.0, den nyeste tilgjengelige versjonen)
- Kryss av for ikonene du trenger i det visuelle rutenettet
- Last ned et ZIP-arkiv med CSS- og webfont-filer, last opp til serveren din
Resultatet er en frittstående pakke på 10-15 KB som du hoster selv. Verktøyet krever ingen registrering, og forhåndsvisningen viser den endelige størrelsen i sanntid.
Begrensning: FontCut bruker FA 6.4.0, ikke den gjeldende versjonen 7.2.0. For de fleste prosjekter er forskjellen ubetydelig: ikoner i solid-stil endres ikke mellom versjoner. Men hvis du trenger ikoner lagt til i FA 7 (Pro+-pakker), vil ikke FontCut tilby dem.
Metode 3: CLI-verktøyet fa-subset (for utviklere)
Automatisk deteksjon av brukte ikoner er den mest presise tilnærmingen. Verktøyet fa-subset (Python, BSD-2-Clause, instruksjoner på Dev.to) skanner kildekoden til prosjektet ditt, finner alle fa-*-klasser og genererer en trimmet webfont som bare inneholder ikonene som faktisk brukes.
Installasjon:
1 pip install fonttools
Grunnleggende kjøring (tørrkjøring for analyse):
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
Verktøyet gir ut en liste over funnede ikoner og den anslåtte størrelsen på den trimmede filen. Uten flagget --dry-run genererer det ferdig CSS og webfont i mappen ./optimised.
Styrker ved fa-subset:
- Skanner PHP, HTML, JS, Blade, Twig, Vue, React og alle tekstfiler i prosjektet ditt
- Forstår duotone-ikoner (doble kodepunkter i Font Awesome 6+)
- Kan produsere en JSON-rapport for CI/CD-pipelines:
--report-json ./report.json --strict-styles - Fungerer med WordPress-temaer, Laravel-maler og React/Vue-komponenter
Reelt produksjonsresultat: komprimering fra 803 KB (fonter + CSS) til 14,5 KB, en reduksjon på 98%. Verktøyet er gratis og ikke knyttet til Font Awesome-tjenester.
Metode 4: IcoMoon (visuell fontbygger)
IcoMoon er en webapplikasjon for å lage egendefinerte ikonfonter. Den er tilgjengelig på icomoon.io/app. Tilnærmingen er litt mer kompleks enn Kits, men tilbyr én unik mulighet: å blande ikoner fra forskjellige biblioteker i én enkelt fil.
Trinn 1: velg Font Awesome-pakken
Gå til icomoon.io/app, klikk «Add Icons From Library», finn Font Awesome i listen og klikk «Add».
Trinn 2: merk ikonene du trenger
I utvalgsvinduet merker du alle ikonene som brukes på nettstedet ditt ved å klikke på hvert enkelt. Du kan velge flere biblioteker samtidig (for eksempel Font Awesome + Material Icons) og få én enkelt fil med ikoner fra begge settene.
Trinn 3: generer og last ned fonten
Etter utvalget klikker du på «Generate Font»-knappen nederst på siden. IcoMoon viser alle valgte ikoner og gir en «Download»-knapp. ZIP-arkivet inneholder webfontfiler (woff, woff2, eot, svg, ttf), en style.css-fil og en demo demo.html.
Lagre filene i nettstedets repository og koble til style.css i <head>. Hvis noe gikk galt, åpner du demo.html fra arkivet: den viser nøyaktig hvordan fonten kobles til og brukes.
IcoMoon fungerer godt når du trenger å blande ikoner fra forskjellige sett, eller når du grunnleggende sett ikke ønsker å være avhengig av Font Awesome CDN.
Metode 5: manuell trimming med FontForge
Den mest arbeidskrevende, men også den mest kontrollerte metoden. Den passer for tilfeller der du vil forstå hver byte av den endelige filen eller jobber i et miljø uten tilgang til eksterne tjenester.
Trinn 1: lokaliser skrifttypen
Last ned Font Awesome fra det offisielle nettstedet. Fjern CDN-lenken fra <head> hvis den var der. Pakk ut arkivet i nettstedets repository.
Koble til CSS lokalt:
1 <link rel="stylesheet" href="/font-awesome/css/font-awesome.css">
Tøm nettleserens hurtigbuffer og last siden på nytt. Ikoner skal vises som før, men nå kontrollerer du filene på din egen server.
Trinn 2: fjern unødvendige filer
Etter utpakking av Font Awesome-arkivet vil du se mappestrukturen:
Kun CSS- og webfont-filer er nødvendige for drift. Moderne nettlesere trenger bare woff2-formatet, så ttf-, eot- og svg-filer kan slettes.
Slett Less- og SCSS-kildekode hvis du ikke planlegger å kompilere dem. Behold kun css/ og fonts/ med filen fa-solid-900.woff2 (eller tilsvarende for din versjon).
Trinn 3: rediger webfonten i FontForge
Last ned og installer FontForge (en gratis skrifttypeditor med åpen kildekode). Åpne .woff2-filen via Fil → Åpne.
I FontForge-grensesnittet finner du glyf-panelet. For å unngå å scrolle manuelt, gå til Encoding → Compact: alle okkuperte posisjoner flyttes til begynnelsen.
Nå den mest kritiske delen: hold Shift og velg alle glyfer nettstedet ditt IKKE bruker. Slett dem (Edit → Clear). Behold kun ikoner som faktisk finnes i din markup: sosiale medier, piler, menyikoner, merkevarelogoer.
Lagre resultatet: Fil → Generate Fonts. Velg Web Open Font Format (woff2) og spesifiser filnavnet. Erstatt den opprinnelige webfonten i fonts/-mappen med den trimmede versjonen.
Last siden på nytt og verifiser alle ikoner. Hvis noen forsvant, slettet du en nødvendig glyf: åpne FontForge igjen og gjenta utvalget mer nøye.
Eller kanskje bare bytte bibliotek?
Noen ganger er den beste optimaliseringen ikke å optimalisere Font Awesome, men å velge et verktøy som er lettere fra starten. Moderne alternativer leverer ikoner i SVG-format med tree-shaking på importnivå: kun ikonene du eksplisitt importerer, havner i pakken.
Tre alternativer verdt å vurdere:
Lucide Icons: 1460+ ikoner, MIT-lisens, direkte etterfølger til Feather Icons. Ikoner på et 24px rutenett, stilistisk nær FA, men pakken veier bare noen få kilobyte med tree-shaking. For React/Vue/Svelte, native komponenter med
size-,color- ogstrokeWidth-props.Phosphor Icons: 1400+ ikoner i seks stiler (thin, light, regular, bold, fill, duotone). Hvert ikon importeres individuelt:
import { House } from '@phosphor-icons/react'. Ingen ubrukt ballast.Bootstrap Icons: 2000+ SVG-ikoner, gratis, under aktiv utvikling. Direkte kompatibilitet med Bootstrap-økosystemet, men kan brukes uavhengig. Separate SVG-filer tillater innebygging av ikoner uten ekstra forespørsler.
Hvis nettstedet ditt kjører på WordPress, kan du se vår guide for å legge til Font Awesome i WordPress. For de som vil dykke dypere inn i nettfonter, finnes det en gjennomgang av hvordan laste nettfonter uten å blokkere renderingen.
⁉️🤔 Ofte stilte spørsmål
Hva er ikon-subsetting og hvorfor trengs det?
Subsetting er prosessen med å lage en redusert versjon av en ikonfont som bare inneholder ikonene som faktisk brukes på nettstedet. Den fullstendige Font Awesome 7 Free-pakken veier omtrent 450 KB i komprimerte nettfontfiler. Et typisk nettsted bruker 10-20 ikoner; etter subsetting krymper filen til 10-15 KB. Forskjellen i lastetid gjenspeiles umiddelbart i PageSpeed-poengsummen: typisk forbedring er 20-40 poeng.
Hvor mange ikoner laster nettleseren hvis jeg koblet til Font Awesome via CDN?
Alle sammen. En CDN-lenke til
all.min.csshenter hele settet med tre stiler: Solid, Regular og Brands. Nettleseren laster alle nettfontfilene selv om bare ett ikon brukes på siden. Dette er nettopp grunnen til at CDN-tilnærmingen uten et Kit er den mest byte-krevende. Et Kit med innstillingen «By Icon» løser dette problemet: CDN-en leverer bare ikonene du eksplisitt valgte i innstillingene.
Hvilken optimaliseringsmetode bør jeg velge for et WordPress-nettsted?
Hvis nettstedet ditt kjører på WordPress og du ikke vil håndtere CLI, bruk det offisielle Kit-et (metode 1). Oppsett tar 5 minutter i dashbordet på fontawesome.com, og resultatene serveres umiddelbart via CDN. Hvis sikkerhetspolicyen forbyr bruk av CDN, fungerer FontCut (metode 2): last ned ZIP-filen, last opp via FTP, koble til i
header.php. For utviklere som ønsker automatisering, kan fa-subset (metode 3) skanne temaets PHP-maler og bygge fonten på nytt ved hver deploy.
Er det trygt å slette nettfontformatene ttf, eot og svg?
Ja. Moderne nettlesere (Chrome, Firefox, Safari, Edge) har støttet woff2 siden 2016. Ifølge data fra Can I Use dekker støtten over 98% av det globale nettlesermarkedet. Woff2-formatet gir bedre komprimering (i gjennomsnitt 30% mer kompakt enn woff). Filene eot (kun nødvendig for IE8), ttf og svg kan trygt slettes fra fontmappen. Behold bare woff2, og hvis du trenger støtte for gammel Safari på iOS 12 og eldre, legg til woff som fallback.
Er det verdt å bruke Font Awesome i det hele tatt i 2026?
Det avhenger av prosjektet. Hvis du allerede har Font Awesome implementert og bruker 5-10 ikoner, løser subsetting (hvilken som helst metode ovenfor) vektproblemet på en time. Hvis prosjektet er nytt og du velger et bibliotek fra bunnen av, bør du vurdere Lucide eller Phosphor: de er bygget rundt tree-shaking fra starten og gir null overhead. Font Awesome er fortsatt ledende innen ikonøkosystemets mengde og integrasjoner, men vektkostnaden uten subsetting er høyere enn moderne SVG-alternativer.
Er det verdt bryet for noen titalls kilobyte?
Definitivt ja. Hver uoptimalisert kilobyte i den kritiske renderingsbanen reduserer konverteringen direkte. Amazon beregnet at 100 ms lasteforsinkelse koster 1% i salg. Google straffer trege sider i mobile søkeresultater. Dette er ikke perfeksjonisme; det er direkte økonomi.
Velg metoden for din situasjon:
- Minimum innsats: Kit med By Icon-innstilling. 5 minutter, resultat umiddelbart på CDN.
- Lokal hosting, ingen registreringer: FontCut. 10 minutter, ZIP på din server.
- CI/CD-automatisering: fa-subset. Skanner kode, bygger på nytt ved deploy.
- Full kontroll: FontForge eller IcoMoon. Tar lengre tid, men du kjenner hvert glyf.
Å redusere fra 450 KB til 15 KB endrer hastighetsopplevelsen dramatisk. Prøv det på ett prosjekt, mål PageSpeed før og etter. Resultatet vil tale for seg selv.
Et profesjonelt team av forfattere og redaktører som spesialiserer seg på å lage kvalitetsinnhold.