1

Onderwerp: Icon fonts of afbeeldingen?

Ik wil mijn buttons flexibeler maken. Ik heb een site waar nu een aantal knoppen zijn die het zelfde uiterlijk hebben, maar verschillen in grootte. De knoppen zijn sprites. Dus verschillende sprites worden er voor de knoppen ingeladen. Nu wil ik deze knoppen flexibeler maken en dus CSS gebruiken. De knop kan ik omzetten naar CSS met een gradient. Helaas ondersteunt IE9 dat niet, dus hiervoor een achtergrond afbeelding gebruiken voor de gradient.
in de knoppen zit soms een afbeelding van een pijl of een driehoek. Deze zitten in de afbeelding van de knop verwerkt.
Dit was mijn inleiding :-).

De iconen die in de knoppen worden gebruikt wil ik met een span:before en een icon font weergeven. Ik heb de juiste gevonden bij fontello. Deze kan ik dan inladen met een @font-face. Maar ik kan van die iconen ook een afbeelding maken en dan inladen via een sprite.

Voordeel van de icon font is dat het makkelijker meeschaald en ik maar 1 font nodig heb als ik meerdere groottes van knoppen wil bedienen.

Wat ik mij afvraag of het qua prestatie ook nog wat uitmaakt, want het font is een http request en de afbeelding ook.

2

Re: Icon fonts of afbeeldingen?

Je zou eens kunnen kijken naar SVG; je kan meerdere vectorafbeeldingen (de iconen) in een bestand stoppen, maar ook de gradients. De sub-afbeeldingen kun je aanroepen in CSS. Verder zou je, als je een pre-processor gebruikt, de SVG bestanden op het eind in de CSS kunnen embedden met behulp van data-URLs (werkt in oudere browsers wat minder).

3

Re: Icon fonts of afbeeldingen?

Bedankt Arjan voor je reactie. Ik werk met Sass, dus het embedden met data-urls zou moeten lukken. Maar wat bedoel je met oudere browsers? Wij testen bij IE vanaf nummer 9.

4

Re: Icon fonts of afbeeldingen?

Het is zelfs mogelijk om het icon-font in je CSS te zetten mbv base-64 encoding. Als je je font genereert met icomoon.io kan je dit als optie zetten. Als je SASS/SCSS gebruikt kan je het zelfs dus in met één CSS bestand inladen.

Ook is het mogelijk omde SVG waar Arjan het over heeft, op te nemen in je CSS. Dit doet jQuery Mobile, bijvoorbeeld. Nadeel is dat het lasitger is om de knop van kleur te laten veranderen.

Qua performance weet ik het antwoord niet, maar ik kan me voorstellen dat één font net zo zwaar is als één sprite?

IconFonts hebben meer voordelen, waarvan ik de scherpte op retina-displays ook belangrijk vind!

5

Re: Icon fonts of afbeeldingen?

Bedankt Maarten. Ik ben met een site bezig waarvan de knoppen afbeeldingen waren. En dat zie je dus op Retina schermen. Daarop zie je goed dat het afbeeldingen zijn. Door de buttons om te zetten naar CSS en Iconfonts te gebruiken krijg je mooie scherpe knoppen. Daar ga ik dus voor.

In SVG en dat gekoppeld met Sass en ook de base64 encoding moet ik mij verder in verdiepen om dat goed te snappen. Genoeg te doen dus de komende tijd :-)