See Pure CSS ikoonide galerii on see, mida tahavad kõik eesliidese arendajad

Adobe disainer Whanging Zhang lõi huvitav veebirakendus jaoks puhta CSS-i ikoonide loomine. See on lihtsalt nimega “CSS ikoon” ja see võib olla üks lahedamaid ikoonigeneraatorid frontendi arendajatele.

See projekt on täiesti tasuta ja avatud GitHubist nii et saate vabalt alla laadida ja segada mis tahes koodiga.

Need ikoonid pole CSS-sõltuvusi või vajate spetsiaalseid brauseri funktsioone. Esmapilgul võib tunduda, et ikoonid on ehitatud SVG-dele nad on tegelikult lihtsalt divs.

CSSi maagia abil saate ehitada kohandatud rea ikoonid jaoks ühised liidese elemendid näiteks hamburgerimenüü, kolmepunktiline ikoon või printimise ikoon (paljude teiste hulgas).

Võite valida õhuke joon või tumedad ikoonid. Nad mõlemad kasutavad sarnased CSS-omadused ja saate isegi näha, millised need on, klõpsates loendis mis tahes ikooni. Näete a libistatav külgriba koos HTML- ja CSS-koodiga koos suurendatud ikooniga.

Kui vaatate koodiväljade paremas ülanurgas, näete a väike koopia ikoon. Klõpsake seda koopia automaatselt lõikepuhvrisse. Oh, ja see koopia ikoon? Samuti on ehitatud Wentingi puhas CSS-kood.

Et muuta värvi mis tahes ikoon, lihtsalt leida värv vara põhikuvaklassis. Selle uuendamine värv vara ka kõik muud.

Kuna need ikoonid on üsna lihtne, ilmselt ei tööta nad iga veebisaidi jaoks. Aga see on a lahedaid alternatiive piltidele või ikoonidele ja selle täiesti tasuta.

Kontrollige CSS-i ikooni avaleht kuni vaata rohkem näiteid ja kopeeri / redigeeri allikat. Sa saad ka testige iga ikooni eraldi CodePenis, kui soovite mänguasi ringi allikaga brauseris.