Ova galerija čistih CSS ikona je ono što svi Frontend programeri žele

Adobe dizajner Wenting Zhang stvorio je zanimljiva web-aplikacija za generiranje čistih CSS ikona. Jednostavno je nazvan “CSS ikona” i može biti jedan od najboljih generatori ikona za programere.

Ovaj projekt je potpuno besplatno i otvorenog izvora na GitHubu tako da možete besplatno preuzeti i zabrljati s bilo kojim od kodova.

Ove ikone nemaju CSS ovisnosti ili trebate posebne značajke preglednika. Na prvi pogled, može izgledati kao da su ikone izgrađene na SVG-ovima, ali oni su zapravo divovi.

Kroz čaroliju CSS-a možete graditi prilagođene ikone linija za zajednički elementi sučelja kao što je izbornik hamburger, ikona od tri točke ili ikona ispisa (među mnogim drugima).

Možete birati između ikone tankih linija ili tamne ispunjene ikone. Oboje koriste sličnih CSS svojstava i čak možete vidjeti što su to klikom na bilo koju ikonu na popisu. Vidjet ćete klizna bočna traka s HTML i CSS kodom zajedno s povećanom ikonom.

Ako pogledate prema gornjem desnom kutu polja koda, vidjet ćete mala kopija ikona. Kliknite na to na automatski kopirati kod u svoj prijenosnik. Oh, i ta kopija ikone? Također izgrađen s Wentingovim čistim CSS kodom.

Do promijenite boju bilo koje ikone, samo naći boja svojstvo u glavnoj klasi ikona. Ažuriranje tog boja svojstvo će promijeniti i sve ostalo.

Budući da su te ikone prilično jednostavno, vjerojatno neće raditi za svaku web-lokaciju. Ali ovo je super alternativa slikama ili fontovima ikona I je potpuno besplatno.

Provjerite Početna stranica CSS ikone do vidi više primjera i za kopirajte / uredite izvor. Također možete testirajte svaku ikonu zasebno u CodePen ako želite igrate se s izvorom u pregledniku.