Micon - Une police d'icônes Windows 10 pour les concepteurs Web

La refonte pour Windows 10 est venue avec de nombreuses nouvelles fonctionnalités et un tout nouveau look. L'un des plus grands changements est venu au style d'icône, en particulier par rapport à Windows 7 et XP.

Merci à l' ensemble Micon, vous pouvez maintenant apporter des icônes de style Win10 directement sur votre site Web .

Ce pack d'icônes se présente sous la forme d'une police d'icônes et est disponible gratuitement via GitHub . Le rapport principal contient les informations d'installation, mais la page d' accueil Micon présente toutes les icônes affichées avec leurs noms de classe appropriés.

La structure actuelle du site suit un format similaire à Font Awesome . Vous pouvez parcourir toutes les icônes et cliquer sur l'une d'elles pour obtenir plus de détails sur une nouvelle page.

Par exemple, prenez cette icône de charge de la batterie qui utilise une conception de la batterie et une petite prise de charge. Vous obtiendrez un aperçu de l'icône dans différentes tailles, ainsi que sa classe d'icônes CSS, dans ce cas, mi-BatteryCharging10 .

Cet ensemble d'icônes fonctionne également comme Font Awesome, où vous pouvez intégrer les icônes directement dans votre code HTML . L'extrait de code pour cette icône de batterie fonctionne exactement de la même manière:

Il est très facile de commencer, avec juste une copie de la feuille de style CSS Micon et quelques connaissances de base de développement front-end .

Consultez la page de configuration pour en savoir plus. Vraiment, vous avez juste besoin de télécharger une copie du pack Micon à partir de GitHub et d'inclure cette feuille de style (avec les polices d'icônes appropriées) dans votre page. De là, il suffit de référencer les noms de classe comme ci-dessus et vous êtes prêt à partir.

Puisque ce projet est open-source, vous êtes libre d'utiliser ces icônes avec n'importe quel projet, personnel ou commercial . Et, vous pouvez même créer votre propre fichier en suivant les instructions de construction du Micon GitHub. De cette façon, vous pouvez simplement ajouter les icônes que vous voulez dans les fichiers de polices et réduire la taille totale du fichier.

Dans l'ensemble, je suis vraiment impressionné par la variété des icônes et la facilité d'installation . Vous pouvez trouver beaucoup d'exemples sur le site Web et même des icônes animées sur la page Exemples qui inclut des extraits de code.

Ces icônes fonctionnent même bien avec Bootstrap, donc vous pouvez le combiner avec le framework BS3 / BS4 pour de vraies mises en page personnalisées.

Téléchargez un copyright libre de la page d'accueil Micon et voyez comment vous pouvez travailler ces icônes de style Windows 10 dans votre prochaine conception.