Ma vettem észre, hogy a nagyszerű minimalista Iconic ikon-szettben mellékelve van az egész gyűjtemény betűtípusként, a TTF és OTF mellett EOT formátumban is – ami a Microsoft szabványa a @font-face féle CSS font-beágyazáshoz. Amellett, hogy így kényelmesen lehet Photoshopban tervezéskor használni az ikonokat, a @font-face megközelítés az éles weboldalon is sok új lehetÅ‘séget nyit meg.

Természetesen erre a szerző is gondolt, (ezért is készültek el a webfont verziók), sőt a pakkban mellékelte a megoldáshoz tartozó CSS-t is (az első linken letölthető). Persze más egyszínű ikonszettel is el lehet játszani ugyanezt.

Amellett, hogy egy ilyen font-fájl jóeséllyel kisebb, mint a sprite-ba gyúrt ikonok, az egyesével lehúzottaknál pedig jóval kevesebb HTTP kérésből a böngészőbe ér (egyből), ezzel az egész kalanddal egy vektoros ikont kapunk. Nagyon szabadon lehet hangolgatni az ikonokat, anélkül használva őket több méretben és színben az oldalon, hogy mindegyikhez külön képet kéne betölteni, a kalandvágyók pedig CSS3 transzformációkkal is vagánykodhatnak.

A CSS így néz ki, font betölt, aztán használ, mintha csak Windings lenne (részlet a fenti Iconic szetthez mellékelt kódból). Érdemes a :before/:after content tulajdonságba rakni az ikonnak megfelelő betűt, nem a HTML kódba, mert ha módosítani kell, utóbbinak csúnya vége lenne.

@font-face {
  font-family: 'IconicStroke';
    src: url("/wp-content/uploads/resources/iconic_stroke.eot");
    src: local('IconicStroke'),
       url("/wp-content/uploads/resources/iconic_stroke.svg#iconic") format('svg'),
	   url("/wp-content/uploads/resources/iconic_stroke.otf") format('opentype');
}
.iconic {
	font-family: "IconicStroke";
}
.iconic.image:before { content: "?"; }
.iconic.article:before { content: ">"; }
.iconic.read-more:before { content: "."; }
.iconic.headphones:before { content: ","; }
.iconic.equalizer:before { content: "<"; }
.iconic.fullscreen:before { content: ":"; }

Az első, részletesebb írás a témában, a kevésből, ami látszólag foglalkozik az egésszel az interneten.