Hva er et ikon font? (Og hvordan du bruker en)

Ikonfonter er en populær løsning på et vanlig CSS-problem; hvordan du kan integrere webikoner i webdesignen din på en effektiv og hurtiglaste måte.

Med mange tilgjengelige tjenester for å gjøre det enkelt å velge og bruke en ikonfont, trenger du ikke lage dine egne fra bunnen av. Ikonfonter er over hele internett.

Men hva er egentlig en ikonfont? Og hvordan bruker du dem? Her er en guide til alt du trenger å vite om ikonskrifter.

Utforsk skrifttyper

Hva er et ikon font?

Ikonskrifter er skrifttyper som bruker bittesmå bilder i stedet for bokstavformer. Som type er hvert tegn skalerbart og kan endres ved hjelp av CSS.

De viktigste grunnene til å bruke en ikonfont er at du enkelt kan endre størrelse, farge, form. Ikonfonter er gjennomsiktige av natur, slik at du kan sette dem på hvilken som helst farge eller bakgrunn, og du kan legge til streker eller endre opaciteten til ikoner.

Det hele er gjort med CSS, slik at du ikke trenger å lage unike bilder for hver nye forekomst av et ikon i designet. (Dette er flott for å holde nettstedet og koden din lett.)

Ikonfonter er vektorbilder, noe som betyr at de er skalerbare. Som med alle andre skrifter, kan du gjøre dem så store eller små du vil. Bruk ikonskrifter alene som kunstelementer eller til og med spredt over andre tekstfelt.

Det mest populære og kjente biblioteket med ikonskrifter er Font Awesome. Det brukes til mer enn 100 millioner nettsteder og inneholder en robust samling av ikonalternativer. Det fungerer med alle de populære verktøyene, inkludert Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React og Ember.

Det er noen få andre ganske kjente fontikonsett også.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Fordeler og ulemper ved bruk av ikon-skrifter

Så hvorfor vil du bruke - eller unngå - en ikonfont? Her er noen av fordeler og ulemper med å jobbe med denne stilen av kunstelement.

Fordeler med å bruke ikon-skrifter

• Ikoner er enkle å skalere så lenge de riktige klassene finnes i CSS-en
• Du kan få store ikonbiblioteker med lite problemer
• Det er enkelt å endre ikonegenskaper, uansett hva du brukte til å bygge nettstedet ditt
• Det er enkelt å legge til ikoner på hvilken som helst side på nettstedet (bare skriv inn ikonnavnet)
• Det er tusenvis av ikoner å velge mellom i alle slags stiler
• WordPress-brukere kan legge til ikonfonter med en enkel plugin eller ved å kopiere fontkatalogen inn i koden (nesten hvilket som helst grensesnitt)
• Du kan lage din egen ikonfont hvis du trenger noe supertilpasset

Ulemper ved å bruke ikon-skrifter

• Ikoner er en enkelt farge eller fargegradient (i de fleste tilfeller); noen flere premium-pakker endrer dette
• Ingen god tilbakevending hvis ikonfonten ikke lastes
• Du trenger kanskje ikke et fullstendig ikonsett
• Noen skjermlesere vet ikke hva de skal gjøre med ikonfonter
• Det er ikke sikkert at du finner en pakke som passer dine behov

Hvordan bruke ikonskrifter

Selv om instruksjonene for bruk av ikonfonter kan variere litt avhengig av hvilken leverandør du velger, er den grunnleggende ideen den samme.

Generelt har du tre alternativer (med mindre du planlegger å gjøre litt mer hardkoding selv):

• Bruk en plugin som installerer alt slik at du bare trenger å ringe ikoner du vil bruke. (Superenkelt!)
• Bruk innebygde fontikoner fra CMS eller nettstedbygger. Dette fungerer utmerket hvis du ikke har et tilpasset nettsted eller trenger / vil ha en bestemt type fontikon. De fleste nettstedbyggere kommer med noe "utenfor boksen."
• Manuelt koble til en ekstern vert ikon font. (Den mer kompliserte versjonen av å bruke en plugin.)

Ikon Fonts vs. SVGs

Den større debatten skifter til om du burde (eller vil) bruke en ikonfont kontra SVG-bilder med det formål å sette inn små bilder på nettstedet ditt. Begge alternativene er like levedyktige og har mye å gjøre med personlig preferanse.

Ikonskrifter er generelt lettere for folk flest å finne og bruke. SVG-ikoner foretrekkes av brukere som trenger mer designkontroll.

En SVG-fil (skalerbar vektorformat) kan gi deg litt mer fleksibilitet i design. (Du er ikke begrenset til én farge). De små, skalerbare filene kan lastes opp rett i mediekatalogen og er enkle å jobbe med. Dette er et godt alternativ hvis du bare trenger en håndfull ikoner og ikke vil forholde deg til et bibliotek.

SVG-er er mer fleksible med muligheten til å legge til flere farger og animasjon.

Ikonfonter kan lastes raskere på sikt fordi de er hurtigbufret. Men forskjellen kan være ganske minimal.

Posisjoneringsikonfonter kan bli litt vanskelige siden de er underlagt typiske fontregler som størrelse, linjeavstand og vertikale justeringer. Dette alene er grunnen til at de fleste som bruker en ikonfont, velger en etablert leverandør i stedet for å prøve å lage sin egen.

SVG-er kan inkludere elementer som gjør dem mer tilgjengelige enn ikonfonter, som kan komme over som bokstavtegn til skjermlesere.

Ikonskrifter er generelt lettere for folk flest å finne og bruke. Biblioteker er generelt tilgjengelige og er ikke vanskelige å forstå. SVG-ikoner foretrekkes av brukere som ønsker mer designkontroll og tilpasningsalternativer.

Begge alternativene er ofte brukt og fungerer bra i de fleste tilfeller. Å velge en har mye å gjøre med det du er mest komfortabel med og hva som samsvarer med designestetikken og brukergrensesnittet ditt.

Konklusjon

Én grunn til at ikonfonter er så populære, er at de er allsidige og enkle å bruke. Takket være et skalerbart format som kan installeres med et par klikk til de fleste innholdsstyringssystemer, kan nesten hvem som helst begynne å bruke ikonskrifter raskt.

Den virkelige fordelen med en ikonfont er at elementet bruker CSS, og ikke er en uavhengig bildefil. Dette er bra for å lage en mager webside med elementer som lastes raskt og i et vektorformat (flott hvis du trenger å endre størrelsen senere).