Icone costruite attraverso CSS3

Da tempo  l'utilizzo delle icone nelle pagine web ha rappresentato un problema di volta in volta affrontato dagli sviluppatori con tecniche diverse, dagli Sprites CSS (realizzazione di un unico file contenente le immagini di cui abbiamo bisogno, immagini che vengono poi visualizzate parzialmente attraverso la proprietà background-position), all'utilizzo di un web font che contenga icone al posto di caratteri tipografici (Icon Font).  Il web font è vettoriale, scalabile a piacere e ha un'ottima compatibilità browser e può quindi essere embeddato usando la direttiva @font-face.

Ma entrambe le tecniche presuppongono il caricamento o di immagini sovradimensionate rispetto alla visualizzazione o di file di font esterni.

Oggi, con CSS3, è possibile costruire icone che rendono il sito più leggero e riducono le chiamate http necessarie alla visualizzazione.

Uno splendido esempio di cosa è possibile fare lo trovate qui, con oltre duecento esempi di implementazione di icone attraverso alcune righe di CSS3!