Această galerie de pictograme pure CSS este ceea ce toți dezvoltatorii Frontend doresc

Adobe designerul Wenting Zhang a creat un aplicație web interesantă pentru generând icoane pure CSS. Este pur și simplu numit “CSS Icon” și poate fi una dintre cele mai tari generatoare de icoane pentru dezvoltatorii frontend.

Acest proiect este complet gratuit și provenite din GitHub astfel încât să aveți libertatea de a descărca și de a mânca cu oricare dintre coduri.

Aceste icoane nu au dependente de CSS sau au nevoie de caracteristici speciale ale browserului. La prima vedere, poate părea că icoanele sunt construite pe SVG, dar ei sunt de fapt doar div.

Prin magia CSS, puteți construi pictograme personalizate pentru elemente de interfață comune cum ar fi meniul de hamburger, pictograma cu trei puncte sau pictograma de imprimare (printre multe altele).

Puteți alege între subțire sau icoane pline de umbră. Ambele utilizează proprietăți similare CSS și puteți vedea chiar și ceea ce sunt, făcând clic pe orice pictogramă din listă. Veți vedea a bara laterală alunecătoare cu codul HTML și CSS împreună cu pictograma mărită.

Dacă vă uitați în colțul din dreapta sus al câmpurilor de cod, veți vedea a mică pictogramă de copiere. Faceți clic pe această opțiune să copiați automat codul în clipboard. Și pictograma asta? De asemenea, construit cu codul CSS curat al lui Wenting.

La schimba culoarea de orice simbol, doar găsi culoare proprietate în clasa principală a pictogramelor. Actualizarea acestuia culoare proprietate va schimba totul altceva.

Deoarece aceste pictograme sunt destul de simplu, probabil că nu vor funcționa pentru fiecare site web. Dar asta e a alternativă alternativă la imaginile sau fonturile de pictograme si este complet gratuit.

Check out Pagina de pornire a Iconului CSS la vedeți mai multe exemple și a copiați / editați sursa. Poti de asemenea testați fiecare pictogramă separat în CodePen dacă doriți jucați cu sursa în browserul dvs..