Diese Galerie von Pure CSS Icons ist was alle Frontend-Entwickler wollen

Adobe-Designer Wenting Zhang hat eine interessante Web-App zum Erzeugen reiner CSS-Icons erstellt . Es heißt einfach "CSS Icon" und ist vielleicht einer der coolsten Icon-Generatoren für Frontend-Entwickler.

Dieses Projekt ist komplett kostenlos und auf GitHub open-sourced, so dass Sie frei sind mit jedem der Codes herunterladen und durcheinander bringen.

Diese Symbole haben keine CSS-Abhängigkeiten oder benötigen spezielle Browserfunktionen. Auf den ersten Blick mag es so aussehen, als würden die Icons auf SVGs aufgebaut, aber sie sind eigentlich nur Divs .

Durch die Magie von CSS können Sie benutzerdefinierte Liniensymbole für gängige Oberflächenelemente wie das Hamburgermenü, das Dreipunktsymbol oder das Druckersymbol (neben vielen anderen) erstellen .

Sie können zwischen dünnen Liniensymbolen oder dunkel gefüllten Symbolen wählen. Beide verwenden ähnliche CSS-Eigenschaften und Sie können sogar sehen, was sie sind, indem Sie auf ein Symbol in der Liste klicken. Sie sehen eine verschiebbare Seitenleiste mit dem HTML- und CSS-Code und dem vergrößerten Symbol.

Wenn Sie in die obere rechte Ecke der Codefelder schauen, sehen Sie ein kleines Kopiersymbol . Klicken Sie darauf, um den Code automatisch in Ihre Zwischenablage zu kopieren . Oh, und dieses Kopiersymbol? Auch mit reinem CSS-Code von Wenting erstellt.

Um die Farbe eines Symbols zu ändern, suchen Sie einfach die Eigenschaft color in der Hauptsymbolklasse. Das Aktualisieren dieser einen color ändert auch alles andere.

Da diese Symbole ziemlich einfach sind, werden sie wahrscheinlich nicht für jede Website funktionieren. Aber das ist eine coole Alternative zu Bildern oder Icon-Schriften und es ist völlig kostenlos .

Auf der Homepage des CSS-Symbols finden Sie weitere Beispiele und können die Quelle kopieren / bearbeiten . Sie können jedes Symbol auch einzeln in CodePen testen, wenn Sie mit der Quelle in Ihrem Browser herumspielen möchten.