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?
- 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"> - Så tilføjer du det ikon du gerne vil have tilføjet: fx denne: med koden:
<i class="fa fa-pied-piper-alt"></i> - 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.
- Dine kunder får nu ikonerne på din side hurtigere og de er altid i rigtig opløsning, uden komprimering.