Du må være registrert og logget inn for å kunne legge ut innlegg på freak.no
X
LOGG INN
... eller du kan registrere deg nå
Dette nettstedet er avhengig av annonseinntekter for å holde driften og videre utvikling igang. Vi liker ikke reklame heller, men alternativene er ikke mange. Vær snill å vurder å slå av annonseblokkering, eller å abonnere på en reklamefri utgave av nettstedet.
  7 743
Yo. Jeg er en hyppig bruker av famfamfams silk-ikoner.
I den anledning har jeg lagd en CSS-fil med klasser til alle de 1000 ikonene – navngitt etter filene med .icn_ som prefix (f.eks. .icn_tux viser tux.png).

Det er to modus. .icon (viser ikonet på venstre side), og .icon_right (viser ikonet på høyre side).

Kode

<span class="[COLOR=RED]icon[/COLOR] [COLOR=GREEN]icn_tux[/COLOR]">Tux</span>

Kode

<span class="[COLOR=RED]icon_right[/COLOR] [COLOR=GREEN]icn_tux[/COLOR]">Tux</span>
Orker ikke å skrive noen omfattende readme, da dette er ganske selvforklarende (for noen som kan bittelitt css). Det ligger et eksempel med i vedlegget.

Vedlagt er silkmap.zip, som inneholder icons/, silkmap.css og examples.html. Vet ikke om jeg EGENTLIG har lov til å distribuere ikonene slik, men det er for å gjøre ting enkelt.

En siste ting: Siden alle ikonene er transparente PNGs, fungerer de som kjent ikke ordentlig i IE6. Dette kan nok ordnes med en PNG-fix (noe dere må finne ut av selv, for det gidder jeg ikke skrive om nå).

Og for dere besserwissere der ute: Ja, jeg vet at det finnes noe som heter SilkSprite, som gjør ca. det samme. Problemet med denne er at den laster inn alle ikonene på en gang (ca. 4-500kb), noe jeg ser på som en rimelig dårlig løsning, siden man mest sannsynlig ikke bruker alle ikonene.

Silk Icon Map kan lastes ned her.

Enjoy!
Oi, den er praktisk Takker, good job!
Ai, pent! Tusen takk!
Tanken er god, men funker ikke i praksis.

Som du selv sier liker du ikke SilkSprite fordi den blir litt vel stor siden man sjelden bruker så mange av ikonene.

Men en 64kb fil er etter min mening også alt for stor å inkludere bare for å gjøre ikonene LITT enklere.

64726 / 800 = 80.9

Så om man bruker 800bytes som gjennomsnittlig størrelse for et icon tilsvarer CSS-arket ditt altså 81 icons i filstørrelse. Det er ganske mye bortkastet båndbredde spør du meg.
Trigonoceps occipita
vidarlo's Avatar
Donor
Hmm, burde det ikkje gå an å bruke javascript til å generere css spesifikt for dei ikona som er brukt? Typ: .icn_application_tile_vertical{background-image:url(icons/application_tile_vertical.png);}

Ellers så vil jo mod_gzip på serveren redusere mengde data som må overførast til 6kB, som er rimelig overkmmelig sammenligna med 64KB...
Philosphicus
Digital Hybrid's Avatar
Trådstarter
Sitat av fuzzy76
Tanken er god, men funker ikke i praksis.

Som du selv sier liker du ikke SilkSprite fordi den blir litt vel stor siden man sjelden bruker så mange av ikonene.

Men en 64kb fil er etter min mening også alt for stor å inkludere bare for å gjøre ikonene LITT enklere.

64726 / 800 = 80.9

Så om man bruker 800bytes som gjennomsnittlig størrelse for et icon tilsvarer CSS-arket ditt altså 81 icons i filstørrelse. Det er ganske mye bortkastet båndbredde spør du meg.
Vis hele sitatet...
Skjønner hva du mener – Har tenkt på det selv. Men du kan jo se på dette som en fil for developing purposes only. :-)

Sitat av vidarlo
Hmm, burde det ikkje gå an å bruke javascript til å generere css spesifikt for dei ikona som er brukt? Typ: .icn_application_tile_vertical{background-image:url(icons/application_tile_vertical.png);}

Ellers så vil jo mod_gzip på serveren redusere mengde data som må overførast til 6kB, som er rimelig overkmmelig sammenligna med 64KB...
Vis hele sitatet...
Det var faktisk en ganske god idé. Selv har jeg lite erfaring med utvikle javascript (bare bruke dem). Noen her som kanskje kan prøve å ta på seg jobben? :-)
Lite kontroversiell
ticks's Avatar
Du kunne også skrevet et type web-script hvor man klikker på de ikonene man ønsker å bruke, og så genereres det en CSS-fil med bare de ikonene man trenger.
Med fare for å trigge bloatware-alarmen, hvorfor ikke bare lage et toolkit i det aktuelle utviklingsmiljøet server-side slik at man slipper å breake usabilityen bare for å forenkle ikonbruken for utvikleren som forøvrig er en engangsjobb.

$icons->get('tux') og integerere kallet inn i MVC/template-systemet og generere et eget stylesheet etter hvilke icons som er brukt. Evt. lage en CSSen med en metode, slik at developeren kan cut'n'paste til eksternt CSS-dokument.