Font Awesome er fedt

Font Awesome er ikke en font, Font Awesome er en samling af ikoner, som man bruger ligesom en font.
Men idéen er at man tilføjer en lille stump kode på sin side, også tilføjer de ikoner man skal bruge, der hvor man skal bruge dem. Du kan erstatte alle de små billeder som ligger på din side, fx den ved søgeknappen, den ved indkøbkurven osv for at gøre din side hurtigere.
På Mackabler.dk erstattede vi nok 10 små billeder, med font-awesome, det betyder at vores kunder skal downloade 10 færre billeder og de skal kun downloade en enkelt font i stedet for. font-awesome fylder kun 27KB, hvorimod dine billeder kan fylde samlet meget mere, men pladsen betyder ikke meget, det betyder mere at dine kunder får færre filer at downloade, hvilket betyder en hurtigere load af din side, det har jeg skrevet om tidligere her.

Der er masser af forskellige ikoner, så du har noget at vælge imellem, fx disse:

Font Awesome kommer i alle størrelser

Du kan selv finde Awesome fonts ikoner her:
Du kan selv bestemme hvor store dine ikoner skal være, da de er lavet i vector grafik er der ikke nogen grænser.
Font Awesome er retina, helt uden du skal gøre noget, og der er ikke noget komprimerning eller dårlig opløsning nogen sinde igen, på nogen enheder.


Hvordan virker det?

  1. Du tilføjer fonten til din side, enten fra awesome-fonts side ellers kan du ligge den på din egen server(det sidste er nok hurtigst).
    Koden er:
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
  2. Så tilføjer du det ikon du gerne vil have tilføjet: fx denne: med koden: <i class="fa fa-pied-piper-alt"></i>
  3. Så sætter du størrelsen enten med css og font-size ellers med at tilføje class’en i HTML fa-4x for 4x størrelse, fa-8x for 8x størrelsen osv.
  4. Dine kunder får nu ikonerne på din side hurtigere og de er altid i rigtig opløsning, uden komprimering.

Brug srcset til at lave retina billeder på din side

Der er først lige nogen begreber som skal på plads.

Retina billeder er billeder i 2x opløsning, jeg kalder det retina fordi Apple gør, men idéen er den samme om det er på en Windows acer eller en Apple Mac.

På nettet viser man billeder i fx 262 x 262px (som nedenstående), dette optager noget plads på skærmen, den plads på en retina skærm svare til (262*2) 524px, derfor sætter man et billede i 4x størrelsen ind(2x på hver side) også bliver det vist skarp på en retina skærm – hvor imod det ser sløret ud på en retina skærm i den normale opløsning.

Der er nogen problemer

Sådan noget her kan enten klares på server siden eller på folks  PC’er.

På server siden virker det ikke rigtigt, fordi din server ikke ved hvilken skærm dine brugere har, og du vil helst ikke sende 4x for meget billede til alle de brugere som ikke kan bruge det til noget, google kan heller ikke lide at dine billeder er for store.

Derfor skal det klares på klient siden. – eller hos dine brugere.
Dette klarede man som regel med Javascript, altså man skrev et meget lille script som erstattede alle billederne med dem som er til Retina, hvis siden skulle vises på en retina skærm. Javascript bliver altid loadet til sidst, så det betyder at alle dine brugere skal hente alle billeder også hente dem igen i retina opløsning, det dumt og er spild af din server og folks pc’er.

Det er her “srcset” kommer ind, det er noget forholdvist nyt og ikke særligt mange bruger det endnu, WordPress er dog lige begyndt at bruge det.

Lige nu bruger man “src” til at definere hvor et billede er, som dette: src=”/img/storfedko.jpg”  srcset kan erstatte src, så man skriver: srcset=”/img/storfedko.jpg”, eller hvis man vil have en anden version til retina skærme skriver man det sådan:

srcset=”/img/storfedko.jpg x1 , /img/storfedko-retina.jpg x2″

Så kommer den gamle parnoide mand op i mig, fordi selv om alle moderne browsere understøtter srcset, så er der mange gamle som ikke gør, derfor kan men ligeså godt beholde det gamle “src”, som gamle browsere kan bruge. På den måde er der det gamle tag til de gamle også bliver det overskrevet af det nye hvis brugerens browser understøtter det.
Hvis man bruger srcset på den måde downloader browseren kun de rigtige billeder, google får de rigtige billeder også, så de ikke brokker sig over for store billeder.

Du må selv gætte på hvilken er retina udgaven og hvilken som ikke er.

ikretinaretina

 

srcset kan også en masse andre smarte ting, fx give billeder i en bestemt størrelse til bestemte telefoner, pc’er eller tablets – der er faktisk ikke nogen grænse. tagget x3 eller x4 virker også hvis skærme kommer med endnu mere opløsning i fremtiden.