Dette galleriet av rene CSS-ikoner er hva alle Frontend-utviklere ønsker

Adobe designer Wenting Zhang opprettet en interessant webapp til genererer rene CSS ikoner. Det heter bare “CSS Ikon” og det kan være en av de kuleste ikon generatorer for frontend-utviklere.

Dette prosjektet er helt gratis og åpnet på GitHub så du kan laste ned og rote med noen av kodene.

Disse ikonene har ingen CSS-avhengigheter eller trenger noen spesielle nettleserfunksjoner. Ved første øyekast kan det virke som ikonene er bygd på SVGs, men de er egentlig bare divs.

Gjennom den magiske CSS, kan du bygge tilpassede linjepiktogrammer til Vanlige grensesnittelementer for eksempel hamburger-menyen, trepunktsikonet eller utskriftsikonet (blant mange andre).

Du kan velge mellom tynne linjepikoner eller mørke fylt ikoner. De bruker begge lignende CSS egenskaper og du kan til og med se hva de er ved å klikke på et hvilket som helst ikon i listen. Du får se en skyve sidebjelke med HTML og CSS-koden sammen med ikonet forstørret.

Hvis du ser mot øverste høyre hjørne av kodefeltene, ser du en lite kopieringsikon. Klikk det til Kopier koden automatisk til utklippstavlen. Oh, og det kopiikonet? Også bygget med Wenting's rene CSS-kode.

Til endre fargen av et hvilket som helst ikon, bare Finn farge eiendom i hovedikonet klassen. Oppdaterer den farge eiendom vil forandre alt annet også.

Siden disse ikonene er ganske enkelt, de vil sannsynligvis ikke fungere for hver nettside. Men dette er en kult alternativ til bilder eller ikonfonter og dets helt gratis.

Sjekk ut CSS Ikon startside til se flere eksempler og til kopiere / redigere kilden. Du kan også test hvert symbol separat i CodePen hvis du vil leke rundt med kilden i nettleseren din.