Micon - Eine Windows 10-Symbolschriftart für Webdesigner

Das Neugestaltung für Windows 10 kam mit vielen neuen Funktionen und einem völlig neuen Look. Eine der größten Änderungen wurde am Stil der Icons vorgenommen, besonders im Vergleich zu Windows 7 und XP.

Danke an die Micon eingestellt, du kannst jetzt Bringen Sie Win10-Icons direkt auf Ihre Website.

Dieses Icon-Pack kommt als Icon-Font und sein kostenlos über GitHub veröffentlicht. Das Hauptrepo hat die Setup-Informationen, aber die Micon Homepage verfügt über alle Symbole mit ihren entsprechenden Klassennamen angezeigt.

Die tatsächliche Website-Struktur folgt einem ähnlichen Format wie Font Awesome. Sie können Durchsuchen Sie alle Symbole und klicken Sie auf eine beliebige Seite, um weitere Informationen zu einer neuen Seite zu erhalten.

Nehmen Sie zum Beispiel dieses Akkusymbol, das ein Akkudesign und einen kleinen Ladestecker verwendet. Du bekommst eine Vorschau des Symbols in verschiedenen Größen, zusammen mit seine CSS-Ikonenklasse, in diesem Fall mi-BatteryCharging10.

Dieses Icon-Set funktioniert ähnlich wie Font Awesome, wo Sie können Betten Sie die Icons direkt in Ihren HTML-Code ein. Der Code-Snippet für dieses Akkusymbol funktioniert genauso:

Es ist sehr einfach, mit gerade erst loszulegen eine Kopie des Micon CSS-Stylesheets und Grundkenntnisse der Front-End-Entwicklung.

Besuche die Setup-Seite um mehr zu lernen. Wirklich musst du nur Laden Sie eine Kopie des Micon-Packs von GitHub herunter und fügen Sie dieses Stylesheet (zusammen mit den richtigen Symbolschriftarten) in Ihre Seite ein. Von dort aus einfach referenzieren Sie die Klassennamen wie oben und du bist gut zu gehen.

Da dieses Projekt Open Source ist, sind Sie Sie können diese Symbole für jedes Projekt, persönlich oder kommerziell verwenden. Und du kannst sogar Machen Sie Ihre eigene Datei Befolgen Sie die Build-Anweisungen des Micon GitHub. Auf diese Weise kannst du packe einfach die gewünschten Icons ein in die Schriftdateien und reduzieren Sie die Gesamtgröße der Datei.

Insgesamt bin ich sehr beeindruckt von der Vielzahl von Icons und das Einfache Einstellung. Sie können finden viele Beispiele auf der Website und sogar animierte Icons auf der Seite mit Beispielen, die Code-Snippets enthält.

Diese Symbole sogar funktionieren gut mit Bootstrap, also kannst du kombinieren Sie es mit dem BS3 / BS4-Framework für einige echte benutzerdefinierte Layouts.

Laden Sie ein kostenloses Copyright von der Micon-Homepage herunter und erfahren Sie, wie Sie diese Symbole im Stil von Windows 10 in Ihr nächstes Design einarbeiten können.