Micon - Μια γραμματοσειρά Icon των Windows 10 για τους σχεδιαστές ιστοσελίδων

ο επανασχεδιασμός για τα Windows 10 ήρθε με πολλά νέα χαρακτηριστικά και μια εντελώς νέα εμφάνιση. Μία από τις μεγαλύτερες αλλαγές ήρθε στο ύφος του εικονιδίου, ειδικά σε σύγκριση με τα Windows 7 και XP.

Χάρη στην Micon σύνολο, μπορείς τώρα φέρτε τα εικονίδια στυλ Win10 απευθείας στον ιστότοπό σας.

Αυτό το πακέτο εικονιδίων έρχεται ως γραμματοσειρά εικονιδίων και είναι κυκλοφορήσει δωρεάν μέσω του GitHub. Το κύριο repo έχει τις πληροφορίες εγκατάστασης, αλλά η αρχική σελίδα του Micon διαθέτει όλα τα εικονίδια στην οθόνη με τα κατάλληλα ονόματα τάξεων.

Η πραγματική δομή του ιστότοπου ακολουθεί ένα παρόμοιο σχήμα με το Font Awesome. Μπορείς περιηγηθείτε σε όλα τα εικονίδια και κάντε κλικ σε οποιοδήποτε από αυτά για να δείτε περισσότερες λεπτομέρειες σε μια νέα σελίδα.

Για παράδειγμα, πάρτε αυτό το εικονίδιο φόρτισης της μπαταρίας που χρησιμοποιεί σχεδιασμό μπαταρίας και μικρό βύσμα φόρτισης. Θα πάρετε ένα προεπισκόπηση του εικονιδίου σε διάφορα μεγέθη, μαζί με την κλάση εικονιδίων CSS, σε αυτήν την περίπτωση mi-BatteryCharging10.

Αυτό το σετ εικονιδίων λειτουργεί επίσης σαν Font Awesome, όπου μπορείτε ενσωματώστε τα εικονίδια απευθείας στο HTML σας. Το απόσπασμα κώδικα για αυτό το εικονίδιο μπαταρίας λειτουργεί ακριβώς το ίδιο:

Είναι πολύ εύκολο να ξεκινήσετε, με απλά λόγια ένα αντίγραφο του φύλλου στυλ Micon CSS και κάποιες βασικές γνώσεις σχετικά με την ανάπτυξη του μετώπου.

Ελέγξτε το σελίδα εγκατάστασης να μάθω περισσότερα. Πραγματικά, απλά πρέπει κατεβάστε ένα αντίγραφο του πακέτου Micon από το GitHub και να συμπεριλάβετε αυτό το φύλλο στυλ (μαζί με τις σωστές γραμματοσειρές εικονιδίων) στη σελίδα σας. Από εκεί, απλά αναφορές στα ονόματα των κατηγοριών όπως παραπάνω και είστε καλό να πάτε.

Δεδομένου ότι αυτό το έργο είναι ανοικτού κώδικα, είστε ελεύθερη να χρησιμοποιήσετε αυτά τα εικονίδια με οποιοδήποτε έργο, προσωπική ή εμπορική. Και, μπορείτε ακόμη και κάντε το δικό σας αρχείο ακολουθώντας τις οδηγίες κατασκευής του Micon GitHub. Με αυτόν τον τρόπο μπορείτε πακετάρετε μόνο τα εικονίδια που θέλετε στα αρχεία γραμματοσειρών και μειώστε το συνολικό μέγεθος αρχείου.

Συνολικά, είμαι πραγματικά εντυπωσιασμένος με το ποικιλία εικονιδίων και το εύκολη ρύθμιση. Μπορείς να βρεις πολλά παραδείγματα στην ιστοσελίδα και ακόμα κινούμενα εικονίδια στη σελίδα "Παραδείγματα", η οποία περιλαμβάνει αποσπάσματα κώδικα.

Αυτά τα εικονίδια ακόμα λειτουργεί καλά με το Bootstrap, ώστε να μπορείτε να συνδυάστε το με το πλαίσιο BS3 / BS4 για μερικές πραγματικές προσαρμοσμένες διατάξεις.

Κατεβάστε δωρεάν τα δικαιώματα πνευματικής ιδιοκτησίας από την αρχική σελίδα του Micon και δείτε πώς μπορείτε να εργαστείτε αυτά τα εικονίδια σε στιλ Windows 10 στην επόμενη σχεδίασή σας.