Diese Galerie mit reinen CSS-Icons ist das, was alle Frontend-Entwickler wollen

Adobe-Designer Wenting Zhang entwickelte eine interessante Web-App zum reine CSS-Icons erzeugen. Es heißt einfach “CSS-Symbol” und es kann einer der coolsten sein Symbolgeneratoren für Frontend-Entwickler.

Dieses Projekt ist komplett frei und Open-Source auf GitHub Sie können also jeden Code herunterladen und verwirren.

Diese Symbole keine CSS-Abhängigkeiten haben oder benötigen spezielle Browserfunktionen. Auf den ersten Blick scheint es, als wären die Icons auf SVGs aufgebaut Sie sind eigentlich nur Divs.

Durch die Magie von CSS können Sie bauen benutzerdefinierte Linie Symbole zum gemeinsame Oberflächenelemente wie das Hamburger Menü, das Drei-Punkt-Symbol oder das Druck-Symbol (unter vielen anderen).

Sie können zwischen wählen dünne Linie Symbole oder dunkel gefüllte Icons. Sie nutzen beide ähnliche CSS-Eigenschaften Sie können sogar sehen, was sie sind, indem Sie auf ein Symbol in der Liste klicken. Sie sehen ein Seitenleiste schieben mit dem HTML- und CSS-Code zusammen mit dem Symbol vergrößert.

Wenn Sie in die obere rechte Ecke der Codefelder blicken, sehen Sie a kleines Kopiersymbol. Klicken Sie das an Kopieren Sie den Code automatisch in Ihre Zwischenablage. Oh, und das Kopiersymbol? Auch mit reinem CSS-Code von Wenting erstellt.

Zu Ändern Sie die Farbe von jedem Symbol, nur finde das Farbe Eigentum in der Hauptikonenklasse. Diesen aktualisieren Farbe Eigentum wird auch alles andere ändern.

Da sind diese Icons ziemlich einfach, Sie funktionieren wahrscheinlich nicht für jede Website. Aber das ist ein coole Alternative zu Bildern oder Symbolschriften und sein komplett frei.

Besuche die CSS Icon-Startseite zu siehe weitere Beispiele und zu Kopieren / bearbeiten Sie die Quelle. Du kannst auch Testen Sie jedes Symbol separat in CodePen, wenn Sie möchten spielt mit der Quelle herum in Ihrem Browser.