Utilisation de la police de caractères génériques dans votre site Web

Je pense que les polices d'icônes sont l'une des meilleures idées jamais nées à l'âge d'or du web design. Certains bons gars d’Automattic sont probablement du même avis depuis qu’ils ont décidé de créer une jolie police d’icônes appelée Genericons. Dans cet article, nous allons apprendre comment sont géniales les polices d'icônes et comment utiliser la police Genericons..

L'importance des polices d'icônes

Comme je l'ai dit, nous vivons à l'âge d'or du web design. De nouvelles technologies naissent chaque jour et les navigateurs les adoptent rapidement. En plus des nouvelles technologies, de nouvelles techniques de conception sont proposées dans le monde entier..

À cette époque d’or, la conception Web réactive est sans doute l’un des concepts les plus populaires. Dans un monde rempli de différents périphériques qui se connectent à Internet, tels que les ordinateurs portables, les tablettes et les smartphones, adaptons nos conceptions aux dimensions et aux densités des périphériques. En tant que concepteurs Web, il est devenu une habitude quotidienne de déplacer des éléments et des graphiques à l’échelle afin de faire en sorte que notre conception fonctionne avec une variété d’appareils, des écrans Apple 27 pouces aux écrans.

C'est là que les polices d'icônes sont utiles.

Avantages de l'utilisation des polices d'icônes

En tant que cadeau de la conception Web réactive, les polices d’icônes sont utilisées pour offrir aux visiteurs un pack graphique optimisé et évolutif, quel que soit le périphérique. De plus, leur compatibilité entre navigateurs nous permet de les faire fonctionner même sur les anciens navigateurs. Nos grands-parents et les employés du DMV peuvent également profiter d'icônes nouvelles et nettes.!

Blague à part, voici les principaux avantages dont vous pouvez bénéficier avec une police de caractères:

Les polices d'icônes sont évolutives. Cela signifie que peu importe la taille de votre icône, vous n'avez pas à faire de compromis sur la qualité de l'image ou la taille du fichier..
Les polices d'icônes peuvent être améliorées avec de simples lignes de CSS. Vous n'avez pas besoin d'ouvrir votre grand éditeur d'images pour changer leurs couleurs ou leur ajouter des ombres. Transparence? Vérifier. Gradients CSS? Vérifier. Rotation 3D? Vérifier. Vous avez eu l'idée. Avec quelques lignes de code CSS, vous pouvez faire presque tout ce que vous pouvez faire pour votre texte. Après tout, ces icônes sont techniquement des bouts de texte.
Les polices d'icônes ont un support incroyable du navigateur. Depuis qu'ils sont les polices et même Internet Explorer 7 prend en charge les polices, vous n'avez pas à vous demander si elles vont ne pas apparaître sur les anciens navigateurs..
Les polices d'icônes sont petites en taille de fichier. Cela peut sembler être un argument controversé (puisqu'un paquet d'icônes PNG pourrait être presque aussi petit que des polices d'icônes), mais vous pouvez voir que le format WOFF de Genericons, par exemple, n'a qu'une taille de fichier de 11 Ko. De plus, vous devez inclure des choses comme my-icon-2x.png si vous avez besoin d'images plus grandes. De plus, les polices d’icône ne font qu’une requête HTTP..

Chris Coyier a une page de démonstration pour les polices à icônes où il explique certains des avantages des polices à icônes et vous permet de les essayer..

Le jeu d’icônes génériques, à partir de décembre 2013

Utiliser des génériques

Genericons est une police géniale créée par Automattic, également les fondateurs de WordPress. La police comprend 121 icônes à la fin de 2013, et elle grossit de temps à autre. Il est également sous licence GPL, nous pouvons donc utiliser ce pack d'icônes dans tous nos projets open source avec des licences compatibles..

Si vous n'utilisez pas de police d'icônes dans votre site Web WordPress, le moment est peut-être venu d'inclure Genericons.!

L'inclure dans votre thème

Si vous souhaitez utiliser cette police d'icônes dans votre thème, il vous suffit de suivre quelques étapes simples:

Téléchargez Genericons en cliquant sur le géant Télécharger bouton sur le site.
Télécharger le Police de caractère dossier dans le dossier racine de votre thème. Si vous le souhaitez, vous pouvez renommer le dossier et le placer dans un autre dossier..
Copier le contenu de la genericons.css déposer dans votre thème style.css fichier. (Si vous avez changé le nom et le chemin du dossier de polices, n'oubliez pas de modifier le CSS afin de corriger le chemin des fichiers de polices.)

Ça y est, votre thème est maintenant compatible à 100% Genericons! Vous pouvez maintenant utiliser les icônes dans vos éléments HTML comme ceci:

 Ce lien a l'icône de la tablette!

Si vous souhaitez utiliser une icône en tant qu'élément distinct, vous devez utiliser le Elément HTML, comme ceci:

Ce lien a aussi l'icône de la tablette!

Notez que vous devez utiliser deux classes CSS: genericon et genericon- icon-name. Je ne vais pas coller les noms des icônes dans cet article (car de nouvelles icônes sont régulièrement ajoutées à la police), mais vous pouvez voir une liste catégorisée de noms d'icônes à l'intérieur du texte. genericons.css fichier. Alternativement, vous pouvez vérifier genericons.com et cliquer sur chaque icône pour voir le nom correspondant..

Utilisation avec le plugin Genericon'd

Si vous ne souhaitez pas intégrer la police dans votre thème et utiliser le pack d'icônes avec un plugin séparé, vous pouvez utiliser le plugin Genericon'd sur wordpress.org..

L’utilisation est presque identique, il vous suffit d’ajouter une autre classe nommée générique:

Ce lien a l'icône de la tablette! Ce lien a aussi l'icône de la tablette!

Alternativement, vous pouvez utiliser un shortcode:

[genericon icon = tablet] Ce lien contient également l'icône de la tablette!

Notez que vous n’avez besoin d’utiliser que le nom de l’icône cette fois-ci..

Conclusion

Les polices d'icônes sont populaires pour un certain nombre de raisons: leur évolutivité, leur facilité d'utilisation et leur compatibilité avec les versions antérieures. Avec un fichier de petite taille, chaque concepteur et développeur Web peut bénéficier de cette technique impressionnante..

Que pensez-vous de Genericons? Partagez vos commentaires avec nous ci-dessous! Et si vous avez aimé l'article, partagez-le pour informer vos amis à propos de Genericons!

Code