Chi lavora per il web lo sa: uno dei grandi nemici dell’usabilità di un sito web è il peso. Ottimizzare i contenuti multimediali è, quindi, una fase essenziale del workflow di un web designer.
L’ottimizzazione delle immagini, ad esempio, prevede un lavoro meticoloso sui PPI, sulle dimensioni, sul formato e sull’eventuale qualità della compressione, affinché il contenuto possa essere perfetto nel rapporto qualità/peso.
Laddove, però, fosse possibile, è sempre consigliabile evitare l’utilizzo di immagini (soprattutto se .PNG), a favore di più leggeri sostituti in codice.
All’interno della nostra sezione ICONE abbiamo moltissime risorse gratuite che consentono di incorporare icone in codice, come: JamIcons, LineIcons, EvaIcons, FontAwesome e moltissimi altri.
Le icone in CSS e HTML
Utilizzare un’icona in CSS e HTML equivale a trattare le icone come se fossero un font.
Utilizziamo Line Icons come esempio (puoi provarlo anche tu):
Il primo step è importare il font/la libreria all’interno del nostro sito.
Ci sono molti modi per farlo: caricare le icone via FTP in una root del proprio sito e richiamarle, oppure (il metodo più rapido) inglobarle tramite una CDN fornita dal servizio stesso.
In quest’ultimo caso ci basterà copiare il codice fornito dal servizio e incollarlo all’interno dei tag <head> del nostro sito web.
<link rel="stylesheet" href="https://cdn.lineicons.com/2.0/LineIcons.css">Dopodiché ci basterà richiamare in HTML l’icona desiderata con un semplice codice come questo:
<i class="lni lni-cart"></i>E il gioco è fatto! Avremo incorporato un’icona leggera e prestante sul nostro sito web!
Per i maniaci della customizzazione, questi servizi offrono spesso anche delle classi extra per impostare dimensioni o animazioni alle icone.
lni-is-spinningLe icone in SVG
Qualora non disponessimo di una libreria/font per le nostre icone, non dobbiamo disperare.
Sappiamo, infatti, che è possibile caricare un SVG su un sito web (come codice) mantenendo l’interfaccia leggera e prestante.
La stessa cosa possiamo farla con le icone di moltissimi servizi, come EvaIcons. In questo caso il procedimento è semplicissimo, basterà copiare il codice SVG ed incollarlo nel nostro website.
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><g data-name="Layer 2"><g data-name="checkmark-circle"><rect width="24" height="24" opacity="0"/><path d="M9.71 11.29a1 1 0 0 0-1.42 1.42l3 3A1 1 0 0 0 12 16a1 1 0 0 0 .72-.34l7-8a1 1 0 0 0-1.5-1.32L12 13.54z"/><path d="M21 11a1 1 0 0 0-1 1 8 8 0 0 1-8 8A8 8 0 0 1 6.33 6.36 7.93 7.93 0 0 1 12 4a8.79 8.79 0 0 1 1.9.22 1 1 0 1 0 .47-1.94A10.54 10.54 0 0 0 12 2a10 10 0 0 0-7 17.09A9.93 9.93 0 0 0 12 22a10 10 0 0 0 10-10 1 1 0 0 0-1-1z"/></g></g></svg>Il risultato è immediatamente visibile online!
