Cette galerie de Pure CSS Icons est ce que tous les développeurs frontend veulent

Le designer Adobe Wenting Zhang a créé un application web intéressante pour générer des icônes CSS pures. C'est simplement nommé “Icône CSS” et il peut être l'un des plus cool générateurs d'icônes pour les développeurs frontend.

Ce projet est complètement libre et code source ouvert sur GitHub de sorte que vous êtes libre de télécharger et de jouer avec l'un des codes.

Ces icônes ne pas avoir de dépendances CSS ou besoin de toutes les fonctionnalités spéciales du navigateur. À première vue, il peut sembler que les icônes sont construites sur des SVG mais ils sont en fait juste divs.

Grâce à la magie de CSS, vous pouvez construire icônes de ligne personnalisée pour éléments d'interface communs tels que le menu hamburger, l'icône à trois points ou l'icône d'impression (parmi beaucoup d'autres).

Vous pouvez choisir entre icônes de la ligne mince ou icônes remplies sombres. Ils utilisent tous les deux propriétés CSS similaires et vous pouvez même voir ce qu’ils sont en cliquant sur une icône de la liste. Vous verrez un barre latérale coulissante avec le code HTML et CSS avec l'icône agrandie.

Si vous regardez dans le coin supérieur droit des champs de code, vous verrez un petite icône de copie. Cliquez dessus pour copier automatiquement le code à votre presse-papiers. Oh, et cette icône de copie? Également construit avec le code CSS pur de Wenting.

À changer la couleur de n'importe quelle icône, juste trouvez le Couleur propriété dans la classe d'icônes principale. Mettre à jour celui-là Couleur propriété va changer tout le reste, aussi.

Depuis ces icônes sont assez simple, ils ne fonctionneront probablement pas pour tous les sites Web. Mais ceci est un alternative intéressante aux images ou aux polices d'icônes et son complètement libre.

Vérifiez Page d'accueil CSS Icon à voir plus d'exemples et à copier / éditer la source. Vous pouvez également tester chaque icône séparément dans CodePen si vous voulez jouer avec la source dans votre navigateur.