Få mest muligt ud af Font Awesome

... med disse simple tricks, og gør det både hurtigere og sjovere at bygge en hjemmeside med Font Awesome.

Af Jens Just Iversen

Font Awesome er - ja - awesome. Forestil dig, at du kan slippe helt for billedfiler og kun bygge dit website med ikoner fra Font Awesomes vidunderlige univers. Well, I've got news for you: det kan du!

Her giver jeg 3 konkrete tips til, hvordan du får mere ud af Font Awesome.

1) Roter dine ikoner

Font Awesome har mange forskellige ikoner, men fra tid til andet kan man mangle en pil i en bestemt retning, eller ønske at et bestemt ikon lå ned i stedet for at stå op. Det er heldigvis super nemt at lave!

Med CSS' transform kan du vende dine ikoner lige som det passer dig.

Se denne fiddle:

2) Læg ikoner som baggrundsbillede

Har du behov for at bruge et Font Awesome ikon som baggrundsbillede til et element, er det også ligetil. Du behøver hverken unødvendigt mange HTML-elementer eller billedfiler.

CSS' :before pseudo klasser kan placere tekst og unicode-karakterer i dit element.

Du skal blot kende ikonets unicode kode. Du finder det på Font Awesomes hjemmeside, ved at klikke på det enkelte ikon. F.eks. her: http://fortawesome.github.io/Font-Awesome/icon/bicycle/ (se teksten "Unicode: f206")

I denne fiddle viser jeg, hvordan det med meget lidt CSS sættes sammen i praksis.

Psst! Vil du rotere et ikon som baggrundsbillede, gøres det ved at medtage CSS-koden fra første tip her i artiklen.

3) Lav ikonet outlined

Flere ikoner findes som både outlined (kun omridset er tegnet op) og som udfyldte (hele ikonet er én farve). Det er dog ikke alle, og nogle gange ville man ønske, at et ikon fandtes som outlined.

Sådan gør du:

Der mangler stadig ikoner?!

Ovenstående tips kan modificere eksisternede ikoner, men tilføjer selvfølgelig ikke nye ikoner til pakken.

Har du behov for andre ikoner, har du et par muligheder.

En hurtig løsning er blot at base64 encode dit billede og placere det i dit stylesheet. Det vil blive cached sammen med dit stylesheet, du får 1 mindre HTTP forespørgsel, og du slipper for en masse billedfiler - men pas på! Gør du det med store billeder, vil dit stylesheet tage lang tid om at blive hentet og hele din side vil vises uden styling indtil billedet er hentet færdig.

Du kan også lave din egen font udfra SVG-filer og evt. sammenlægge den med Font Awesome, for et custom build - prøv f.eks. IcoMoon.io.

I begge ovenstående tilfælde mister dine brugere dog muligheden for at bruge en cached version af Font Awesome fra et kendt CDN til hurtigt at indlæse dine billeder. I år 2016 er det måske relevant at overveje, om et andet ikon fra Font Awesome kunne bruges i stedet, og dermed ikke gå glip af dyre millisekunder på indlæsningstiden?

Har du nogle tips, der har gjort dit arbejde med Font Awesome lettere, hører jeg gerne om det herunder. Tak fordi du læste med :-)