Ikon fonte i WordPress, hvorfor er det spændende?

03-12-14 brianbrandt 0 kommentarer

Læs videre hvis du gerne vil vide mere om symbol- eller ikon fonte, i WordPress, og hvorfor de er spændende.

Ikon fonte i WordPress, hvorfor er det spændende?

En font (en skrifttype) kan indeholde hundredevis af tegn i vektorformat, uden at fylde særligt meget.

Det er således de forskellige skrifttyper, så som Helvetica, Arial, Times New Roman og den elskede og frygtede Comic Sans, bliver opbevaret.

Én af de fede ting ved at opbevare symboler og tegn, som f.eks. bogstaver – i vektorformat – er at vektorformatet kan skaleres uden tab af kvalitet Dvs. det samme tegn kan udskrives i alle størrelser fra meget få millimeter til uendeligt store, og stadigvæk forblive knivskarpt – idet den grafiske beskrivelse af tegnet er lavet som et sæt koordinater (der kan ganges op eller ned for at ændre størrelse) i stedet for pixels (der kun kan skaleres ned, uden at miste skarphed). Idet alle tegn i en font fil opbevares som et sæt koordinater (der løbende ganges op eller ned), ændrer størrelsen på tegnene – ved visning – ingenting i forhold til selve font-filens størrelse. Dvs. det gør ingen forskel på om et facebook ikon der gemmes som et tegn i en font-fil, fylder 10px i højden på en hjemmeside, eller om det fylder hele skærmen. Det vil være lige så skarpt i begge tilfælde og kræve akkurat lige så mange eller få ressourcer for at siden kan vises.

Det samme kan absolut ikke siges om billeder, der fylder fire gange så meget for hver gang de fordobles i bredde og højde.

En yderligere fordel ved ikon fonte, er at hvis man f.eks. vil have et ikon der skifter farve, af en eller anden grund (f.eks. ved at man fører musen hen over det), er det lige så nemt som at skifte farve på hvilken som helst anden skrifttype: det kan gøres direkte med CSS uden at der skal hentes flere filer. Vil man til gengæld ændre farven på et ikon, der er gemt som et billede, skal man enten bruge to billeder der kan blive udskiftet for hinanden eller bruge et dobbelt så stort billede, der består af begge varianter, jævnfør eksemplet i indlægget: Performanceoptimeret social-sharing i WordPress.

De mest udbredte ikon fonte vedligeholdes også løbende, så de hele tiden får de ikoner der er oppe i tiden – så som ikoner for de mest populære social media tjenester – og/eller handlinger i apps og på hjemmesider – så som ikoner for deling, skyen, tag et billede, GPS, osv.

Har man hentet en ikon font ned fra én hjemmeside, der benytter sig af browser cache (lokalt lager af filer, der anvendes gentagene gange) vil den samme ikon font være tilgængelig lokalt for brugerens browser næste gang brugeren kommer forbi en side der bruger den samme ikon font. Dvs. den vil ikke skulle hentes ned fra Internettet igen og vil derfor ikke bruge nogen båndbredde, hvilket er super effektivt i forhold til en sides hastighed.

Dvs. ikoner fra ikon fonte har bl.a. følgende fordele frem for ikoner fra billeder:

  • De fylder mindre, idet de kan samles i én fil, og gør hjemmesider derved hurtigere
  • De kan genbruges mellem hjemmesider – og bruger man de mest udbredte, kan det betyde at de slet ikke kræver at blive hentet ned til brugerens browser, hvor de allerede er tilgængelige i forvejen.
  • De er knivskarpe i alle størrelser
  • De kan styles på alle de samme måder alt andet tekst kan styles på – direkte med CSS. Dvs. de kan roteres, skifte farve, få skygger, ændre størrelse, osv. – stort set alt hvad man kunne ønske sig at et ikon skal kunne
  • De findes med hundredevis af de mest anvendte og anvendelige ikoner, der er brug for og som brugerne kender
  • De vedligeholdes af andre, så du skal ikke tænke på at tegne nye ikoner op hver gang
  • De installeres på samme måde som andre skrifttyper, så de er supernemme at implementere

[nobs]

Eksempler på ikon fonte, der allerede anvendes, eller der nemt kan anvendes, i WordPress:

  • Genericons: http://genericons.com/ er en meget lille ikon font, der består af generiske ikoner til apps/web. Ca. 145+ ikoner.
  • Dashicons: https://developer.wordpress.org/resource/dashicons/ har du garanteret set i backenden af WordPress – dvs. det er den ikon font der bruges i WordPress’ egen kontrolpanel. Ca. 196+ ikoner.
  • Font Awesome: http://fortawesome.github.io/Font-Awesome/icons/ er en fantastisk resource, med ikoner for stort set alt hvad man kan komme i tanke om. Ca. 479+ ikoner.
  • Fontello.com: http://fontello.com/ er en fantastisk side, der tillader dig at blande din egen smagsvariant af ovenstående, eller forvandle dine egne ikoner til en ikon font… Ca. ”få til MANGE” ikoner, alt efter hvad du har brug for…

[/nobs]

Der findes selvfølgelige mange flere, både gratis og ikke gratis.