Micon - Ein Windows 10 Icon Font für Webdesigner

Das Redesign für Windows 10 kam mit vielen neuen Funktionen und einem ganz neuen Look. Eine der größten Änderungen kam zum Icon-Stil, insbesondere im Vergleich zu Windows 7 und XP.

Dank dem Micon-Set können Sie jetzt Win10-Style-Icons direkt auf Ihre Website bringen .

Dieses Icon-Paket kommt als Icon-Font und wird kostenlos über GitHub veröffentlicht . Das Hauptrepo enthält die Einrichtungsinformationen, aber die Micon-Homepage enthält alle angezeigten Symbole mit ihren entsprechenden Klassennamen.

Die eigentliche Website-Struktur folgt einem ähnlichen Format wie Font Awesome . Sie können alle Symbole durchsuchen und auf eine davon klicken, um mehr Details zu einer neuen Seite zu erhalten.

Nehmen Sie zum Beispiel dieses Batterieladesymbol, das ein Batteriedesign und einen kleinen Ladestecker verwendet. Sie erhalten eine Vorschau des Symbols in verschiedenen Größen, zusammen mit seiner CSS mi-BatteryCharging10, in diesem Fall mi-BatteryCharging10 .

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

Es ist super einfach zu starten, mit nur einer Kopie des Micon CSS Stylesheets und ein paar Grundkenntnissen der Front-End Entwicklung .

Auf der Einrichtungsseite erfahren Sie mehr. Wirklich, Sie müssen nur eine Kopie des Micon Packs von GitHub herunterladen und dieses Stylesheet (zusammen mit den richtigen Icon-Fonts) in Ihre Seite einfügen. Von dort referenzieren Sie einfach die Klassennamen wie oben und Sie sind gut zu gehen.

Da es sich bei diesem Projekt um ein Open-Source-Projekt handelt, können Sie diese Symbole für jedes persönliche oder kommerzielle Projekt verwenden . Und Sie können sogar Ihre eigene Datei erstellen, indem Sie den Build-Anweisungen des Micon GitHub folgen. Auf diese Weise können Sie nur die gewünschten Symbole in die Schriftartdateien packen und die Gesamtgröße der Datei reduzieren.

Insgesamt bin ich sehr beeindruckt von der Vielfalt der Icons und der einfachen Einrichtung . Sie finden viele Beispiele auf der Website und sogar animierte Symbole auf der Beispielseite, die Code-Snippets enthält.

Diese Icons funktionieren auch gut mit Bootstrap, also können Sie es mit dem BS3 / BS4-Framework für einige echte benutzerdefinierte Layouts kombinieren .

Laden Sie ein kostenloses Copyright von der Micon-Homepage herunter und sehen Sie, wie Sie diese Windows 10-Icons in Ihrem nächsten Design verwenden können.