Rasmus​.krats​.se

Ikonfont

Publicerad 2012-12-03 20:30. Taggat , , , .

Notera att detta inlägg är 11 år gammalt. Innehållet kan vara inaktuellt.

En ganska omskriven teknik på senare tid är att använda en speciell font med symboler i stället för bilder som ikoner. En fördel är att det blir färre filer att ladda (utan att behöva använda “css sprites”, som blir ganska jobbigt att hantera i längden). En annan fördel är tecken i fonter ju är vektor­baserade, så ikonerna blir perfekt skalbara. Dessutom kan ju tecken i fonter utan problem kombineras med css för att t ex passa in i knappar eller byta färg vid fokus, utan att man behöver göra olika versioner i olika färger av ikonerna.

En nackdel kan vara att en font ofta innehåller mycket fler ikoner än man egentligen behöver, och därmed är ganska stor. Font Awesome består till exempel av 220 riktigt snygga ikoner och kostar runt 40kb. Nu finns dock en lösning på det problemet genom siten Fontello, som även genererar enkla exempel på den CSS som behövs.

Så nu använder jag en liten font med några ikoner. På så sätt blir de dels snyggt skalbara och dels kan de laddas tillsammans i stället för en och en, vilket sparar lite bandbredd.

Symbolerna är ur Font Awesome, CC BY Dave Gandy, och Entypo, © 2012 Daniel Bruce. Symbolurvalet är gjort med Fontello.

Kommentarer

Det här inlägget är 11 år gammalt, det kan inte längre kommenteras.