Táto galéria čistých ikon CSS je to, čo všetci vývojári Frontend chcú

Návrhár Adobe Wenting Zhang vytvoril zaujímavú webovú aplikáciu pre generovanie čistých ikon CSS. Je to jednoducho pomenované “Ikona CSS” a môže to byť jeden z najlepších ikony generátory pre vývojárov frontend.

Tento projekt je úplne zadarmo a open-source na GitHub takže si môžete stiahnuť a zablokovať ľubovoľný kód.

Tieto ikony nemajú žiadne závislosť CSS alebo potrebujete špeciálne funkcie prehliadača. Na prvý pohľad sa môže zdať, že ikony sú postavené na SVG, ale sú to vlastne len divs.

Prostredníctvom magie CSS môžete stavať vlastné ikony riadkov pre prvky spoločného rozhrania ako je ponuka hamburgerov, ikona s troma bodkami alebo ikona tlače (medzi mnohými ďalšími).

Môžete si vybrať medzi tenké čiary ikony alebo tmavé ikony. Oba používajú podobné vlastnosti CSS a môžete dokonca zistiť, čo sú, kliknutím na ľubovoľnú ikonu v zozname. Zobrazí sa a posuvný postranný panel s kódom HTML a CSS spolu s rozšírenou ikonou.

Ak sa pozriete do pravého horného rohu polí s kódmi, uvidíte znak a malá ikona kópie. Kliknite na to automaticky kopírovať kód do schránky. A táto ikona kópie? Tiež postavené s čistým CSS kódom spoločnosti Wenting.

na zmeniť farbu akejkoľvek ikony, jednoducho nájsť farba vlastnosť v hlavnej triede ikon. Aktualizácia tohto farba vlastnosť zmení všetko ostatné.

Vzhľadom k tomu, tieto ikony sú celkom jednoduché, pravdepodobne nebudú pracovať pre všetky webové stránky. Ale toto je a cool alternatíva k obrázkom alebo ikonám a jeho úplne zadarmo.

Pozrite sa na stránku Domovská stránka Ikony CSS na pozri ďalšie príklady a kopírovať / upravovať zdroj. Môžete tiež otestujte každú ikonu samostatne v CodePen, ak chcete hrať okolo so zdrojom v prehliadači.