Dette Galleriet av rene CSS-ikoner er hva alle Frontend-utviklere vil ha

Adobe designer Wenting Zhang opprettet en interessant webapp for å generere rene CSS-ikoner . Det er ganske enkelt kalt "CSS Icon", og det kan være en av de kuleste ikongeneratorene for frontend-utviklere.

Dette prosjektet er helt gratis og åpnes på GitHub, slik at 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 CSS 'magi kan du bygge egendefinerte linjepictogrammer for vanlige grensesnittelementer som hamburgermenyen, trepunktsikonet eller utskriftsikonet (blant mange andre).

Du kan velge mellom tynne linjepikoner eller mørkfylte 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 vil se et glidende sidebar med HTML- og CSS-koden sammen med ikonet forstørret.

Hvis du ser mot det øverste høyre hjørnet av kodefeltene, ser du et lite eksemplar på kopi . Klikk for å automatisk kopiere koden til utklippstavlen. Oh, og det kopiikonet? Også bygget med Wenting's rene CSS-kode.

For å endre fargen på et hvilket som helst ikon, finn bare color i hovedikonklassen. Oppdatering av den ene color vil forandre alt annet også.

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

Ta en titt på CSS Icon-hjemmesiden for å se flere eksempler og kopiere / redigere kilden . Du kan også teste hvert ikon separat i CodePen hvis du vil leke rundt med kilden i nettleseren din.