Dette Galleri af rene CSS-ikoner er, hvad alle Frontend-udviklere vil have

Adobe designer Wenting Zhang oprettet en interessant webapp til genererer rene CSS ikoner. Det er simpelthen navngivet “CSS ikon” og det kan være en af ​​de fedeste ikon generatorer til frontend-udviklere.

Dette projekt er helt gratis og åbnet på GitHub så du er fri til at downloade og rod med nogen af ​​koderne.

Disse ikoner har ikke nogen CSS afhængigheder eller har brug for særlige browserfunktioner. Ved første øjekast ser det ud til at ikonerne er bygget på SVG'er men de er faktisk bare divs.

Gennem CSS 'magi kan du bygge brugerdefinerede linjepikoner til fælles grænsefladeelementer f.eks. hamburgermenuen, trepunktsikonet eller udskrivningsikonet (blandt mange andre).

Du kan vælge imellem tynde linje ikoner eller mørke fyldte ikoner. De begge bruger lignende CSS egenskaber og du kan endda se, hvad de er ved at klikke på et hvilket som helst ikon på listen. Du får se en glidende sidebjælke med HTML og CSS kode sammen med ikonet forstørret.

Hvis du ser mod det øverste højre hjørne af kodefelterne, vil du se en lille kopi ikon. Klik på det til Kopier kopien automatisk til dit udklipsholder. Åh, og at kopiikonet? Også bygget med Wenting's rene CSS-kode.

Til skift farve af ethvert ikon, bare Find farve ejendom i hovedikonet klassen. Opdaterer den ene farve ejendom vil ændre alt andet også.

Da disse ikoner er ret simpelt, de vil nok ikke fungere for hver hjemmeside. Men dette er en køligt alternativ til billeder eller ikon skrifttyper ogdet er helt gratis.

Tjek den CSS Icon hjemmeside til se flere eksempler og til kopiere / redigere kilden. Du kan også test hvert ikon separat i CodePen, hvis du vil legetøj rundt med kilden i din browser.