Questa galleria di icone Pure CSS è ciò che tutti gli sviluppatori di frontend desiderano

Il designer di Adobe Wenting Zhang ha creato un app web interessante per generando icone CSS pure. È semplicemente chiamato “Icona CSS” e potrebbe essere uno dei più belli generatori di icone per gli sviluppatori di frontend.

Questo progetto è completamente gratis e open-source su GitHub quindi sei libero di scaricare e pasticciare con uno qualsiasi dei codici.

Queste icone non hanno dipendenze CSS o necessita di particolari funzioni del browser. A prima vista, potrebbe sembrare che le icone siano costruite su SVG ma in realtà sono solo div.

Attraverso la magia del CSS, puoi costruire icone linea personalizzata per elementi di interfaccia comuni come il menu dell'hamburger, l'icona a tre punti o l'icona di stampa (tra molti altri).

Puoi scegliere tra icone di linea sottile o icone piene di buio. Entrambi utilizzano proprietà CSS simili e puoi persino vedere cosa sono facendo clic su qualsiasi icona nell'elenco. Vedrai a barra laterale scorrevole con il codice HTML e CSS insieme all'icona ingrandita.

Se guardi verso l'angolo in alto a destra dei campi del codice vedrai a piccola icona di copia. Clicca qui copia automaticamente il codice ai tuoi appunti. Oh, e quell'icona della copia? Costruito anche con il puro codice CSS di Wenting.

A cambia il colore di qualsiasi icona, solo trovare la colore proprietà nella classe dell'icona principale. Aggiornare quello colore proprietà cambierà anche tutto il resto.

Dal momento che queste icone sono abbastanza semplice, probabilmente non funzioneranno per ogni sito web. Ma questo è un bella alternativa alle immagini o ai font di icone e la sua completamente gratis.

Guarda il Home page dell'icona CSS a vedere più esempi e a copia / modifica la fonte. Puoi anche prova ogni icona separatamente in CodePen se vuoi gioca con la fonte nel tuo browser.