Vil du have 519 ikoner?

Alle der laver hjemmesider, eller måske bare en lille snip kode til en hjemmeside, kender det. Du ender med at skulle bruge ikoner. Små illustrative dingenoter der leder brugerens øje på rette vej. Et lille forenklet billede af et brev ved siden af dit link til din mailadresse ser godt ud. Og det hjælper dine brugere til at finde lidt hurtigere rundt på din hjemmeside.

Hvis du googler “ikon” eller “icon” vil du finde i nærheden af en trillion forskellige små billeder af breve, telefoner, pile, hjerter, kalendere, fingre, smileys osv. osv. Problemet med alle disse, mere eller mindre gode, små billeder er bl.a., at de ikke tåler skalering uden at blive pixelerede eller slørede (og at de rent faktisk som regel er belagt med copyright – der er bare ikke mange, der hænger sig i den lille detalje).

Men hvad skal sådan et ikon egentlig gøre?

Et ikon skal, i al sin gribende enkelthed, lede opmærksomheden hen det rigtige sted, eller måske endda erstatte noget tekst. De fleste internet-brugere tager det f.eks. som en selvfølgelighed, at en lille kuvert betyder, at det er her man kan kontakte ejeren af hjemmesiden via email. Hvad en kuvert så har med en email at gøre… tjaaa… ikke desto mindre virker det.

Bl.a. derfor er jeg næsten holdt op med at lave mine egne små kunststykker, hver gang jeg skal have ikoner til en hjemmeside. Små, ekstremt enkle, tegninger kan nemlig næsten altid opfylde behovet for en illustrativ ledetråd. Og folk er jo ikke kommet for, at se på ikoner. De søger oplysning eller underholdning, og det skal være nemt.

Og her kom font-awesome

Derfor har jeg valgt at hente font-biblioteket “font-awesome” (faktisk er det bare én css-fil) og linke det via css på mange af mine hjemmesider. Det gør at jeg, med en simpel deklaration, kan få et væld af ikoner, uden at skulle tegne noget som helst.

Papirflyveren her er faktisk slet ikke et billede. Det er en del af “font-awesome” der, i skrivende stund, indeholder ikke mindre end 519 forskellige “ikoner”. Og udvalget bliver løbende større og større. De ser måske ikke så imponerende eller glitrende ud ved første øjekast. Bare en røvfuld flade sorte kedelige små billeder, der ikke kan imponere nogen som helst. Men giv dem lige en chance, inden du kaster dem ud med badevandet. Alle ikonerne kan nemlig “styles” via css (Cascading Style Sheets). Og det åbner faktisk et væld af muligheder for at tilpasse dem netop til dit behov.

De kan sættes op og ned i størrelse (uden kvalitetstab), de kan farves, de kan ændre farve, når du fører musen over dem, der kan lægges skygge på dem, de kan animeres, de kan “stables” osv. osv.

Og alt sammen med et lille stykke kode der er skrigende enkelt:

<i class="fa fa-camera-retro fa-lg"></i>

…giver for eksempel dette lille smukke kamera til linket til dit galleri:

…som snildt kan farves orange ved at tilføje style="color: orange;":

…eller de kan animeres: | | | | | | |

Alt hvad du kan gøre med css font-styles kan du gøre med disse “ikoner”. Faktisk er det en font du roder med, og her giver css dig rige muligheder – ikke mindst css3 der er godt på vej efterhånden.

Det er bare at lege rundt