Corsi on-line

Sfruttare i font al posto delle icone

Per inserire icone raffigurative di accompagnamento ai link di un menù o a determinate intestazioni, potremmo non aver più bisogno di Photoshop o di pack preconfezionati pieni di GIF e PNG: una soluzione alternativa è fornita da questo set di istruzioni per sostituire le immagini con un font.
Nello specifico si tratta di utilizzare il font “entypo“, prelevato da GoogleFont via CSS, ed utilizzarlo vicino al testo vero e proprio. Il meccanismo, abbastanza semplice, è il seguente:

  1. Si crea un tag span vuoto prima del testo
  2. Gli si assegna la pseudo-classe before ed il font “entypo”
  3. Lo si valorizza tramite l’attributo “content” assegnandogli l’entità di carattere corrispondente al simbolo scelto
    1. Facile, veloce, personalizzabile, scalabile. L’unica controindicazione, per i puristi, è la presenza di un tag vuoto che “sporca” un po’ il nostro markup.

Post correlati
I più letti del mese
Tematiche