Qu'est-ce qu'une police d'icônes? (Et comment en utiliser un)

Les polices d'icônes sont une solution populaire à un problème CSS courant; comment intégrer des icônes Web dans la conception de votre site Web de manière efficace et à chargement rapide.

Avec de nombreux services disponibles pour faciliter le choix et l'utilisation d'une police d'icônes, vous n'avez pas à créer la vôtre à partir de zéro. Les polices d'icônes sont partout sur Internet.

Mais qu'est-ce qu'une police d'icônes exactement? Et comment les utilisez-vous? Voici un guide de tout ce que vous devez savoir sur les polices d'icônes.

Explorer les polices

Qu'est-ce qu'une police d'icônes?

Les polices d'icônes sont des polices de caractères qui utilisent de petites images plutôt que des lettres. Comme le type, chaque caractère est évolutif et peut être modifié à l'aide de CSS.

Les principales raisons d'utiliser une police d'icône sont que vous pouvez facilement changer la taille, la couleur, la forme. Les polices d'icônes sont transparentes par nature, vous pouvez donc les mettre sur n'importe quelle couleur ou type d'arrière-plan et vous pouvez ajouter des traits ou modifier l'opacité des icônes.

Tout est fait avec CSS afin que vous n'ayez pas à créer des images uniques pour chaque nouvelle instance d'une icône dans la conception. (C'est idéal pour garder votre site Web et votre code légers.)

Les polices d'icônes sont des images vectorielles, ce qui signifie qu'elles sont évolutives. Comme pour toute autre police, vous pouvez les rendre aussi grandes ou petites que vous le souhaitez. Utilisez les polices d'icônes seules comme éléments artistiques ou même dispersées dans d'autres champs de texte.

La bibliothèque de polices d'icônes la plus populaire et la plus connue est Font Awesome. Il est utilisé pour plus de 100 millions de sites Web et comprend une solide collection d'options d'icônes. Il fonctionne avec tous les outils populaires, y compris Web Fonts + CSS, SVG + JS, Sketch, Adobe Apps, Vue.js, Angular, React et Ember.

Il existe également quelques autres ensembles d'icônes de polices assez connus.

• Flaticon
• Icofont
• Fontello
• IcoMoon

Avantages et inconvénients de l'utilisation des polices d'icônes

Alors pourquoi utiliser - ou éviter - une police d'icônes? Voici quelques avantages et inconvénients de travailler avec ce style d'élément artistique.

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

• Les icônes sont faciles à mettre à l'échelle tant que les classes appropriées existent dans votre CSS
• Vous pouvez obtenir de grandes bibliothèques d'icônes avec peu de problèmes
• La modification des propriétés des icônes est facile, peu importe ce que vous avez utilisé pour créer votre site Web
• Il est facile d'ajouter des icônes à n'importe quelle page du site Web (il suffit d'insérer le nom de l'icône)
• Il y a des milliers d'icônes à choisir dans toutes sortes de styles
• Les utilisateurs de WordPress peuvent ajouter des polices d'icônes avec un simple plugin ou en copiant le répertoire des polices dans le code (presque n'importe quelle interface)
• Vous pouvez créer votre propre police d'icône si vous avez besoin de quelque chose de super personnalisé

Inconvénients de l'utilisation des polices d'icônes

• Les icônes sont une seule couleur ou un dégradé de couleurs (dans la plupart des cas); d'autres packs premium changent cela
• Pas de bonne solution de rechange si la police de l'icône ne se charge pas
• Vous pourriez ne pas avoir besoin d'un jeu d'icônes complet
• Certains lecteurs d'écran ne savent pas quoi faire avec les polices d'icônes
• Vous pourriez ne pas trouver un pack qui correspond à vos besoins

Comment utiliser les polices d'icônes

Alors que les instructions d'utilisation des polices d'icônes peuvent varier légèrement selon le fournisseur que vous choisissez, l'idée de base est la même.

En règle générale, vous avez trois options (sauf si vous prévoyez de coder un peu plus vous-même):

• Utilisez un plugin qui installe tout pour que vous n'ayez qu'à appeler les icônes que vous souhaitez utiliser. (Super facile!)
• Utilisez les icônes de police intégrées de votre CMS ou constructeur de site Web. Cela fonctionne très bien si vous n'avez pas de site personnalisé ou si vous avez besoin / voulez un type spécifique d'icône de police. La plupart des créateurs de sites Web proposent quelque chose de «prêt à l'emploi».
• Lien manuel vers une police d’icône hébergée en externe. (La version la plus compliquée de l'utilisation d'un plugin.)

Polices d'icônes vs SVG

Le plus grand débat est de savoir si vous devez (ou souhaitez) utiliser une police d'icône par rapport aux images SVG dans le but d'insérer de petites images sur votre site Web. Les deux options sont également viables et ont beaucoup à voir avec les préférences personnelles.

Les polices d'icônes sont généralement plus faciles à trouver et à utiliser pour la plupart des gens. Les icônes SVG sont préférées par les utilisateurs qui ont besoin de plus de contrôle de conception.

Un fichier SVG (format vectoriel évolutif) peut vous donner un peu plus de flexibilité dans la conception. (Vous n'êtes pas limité à une seule couleur). Les petits fichiers évolutifs peuvent être téléchargés directement dans votre répertoire multimédia et sont faciles à utiliser. C'est une bonne option si vous n'avez besoin que d'une poignée d'icônes et que vous ne voulez pas traiter avec une bibliothèque.

Les SVG sont plus flexibles avec la possibilité d'ajouter plus de couleurs et d'animation.

Les polices d'icônes peuvent se charger plus rapidement à long terme car elles sont mises en cache. Mais la différence peut être assez minime.

Le positionnement des polices d'icônes peut devenir un peu délicat car elles sont soumises à des règles de police typiques telles que la taille, l'espacement des lignes et les alignements verticaux. C'est la raison pour laquelle la plupart des gens qui utilisent une police d'icônes optent pour un fournisseur établi plutôt que d'essayer de créer la leur.

Les SVG peuvent inclure des éléments qui les rendent plus accessibles que les polices d'icônes, qui peuvent apparaître sous forme de caractères de lettre pour les lecteurs d'écran.

Les polices d'icônes sont généralement plus faciles à trouver et à utiliser pour la plupart des gens. Les bibliothèques sont généralement disponibles et ne sont pas difficiles à comprendre. Les icônes SVG sont préférées par les utilisateurs qui souhaitent plus de contrôle de conception et d'options de personnalisation.

Les deux options sont couramment utilisées et fonctionnent bien dans la plupart des cas. En choisir un a beaucoup à voir avec ce avec quoi vous êtes le plus à l'aise et ce qui correspond à votre esthétique de conception et à votre interface utilisateur.

Conclusion

L'une des raisons pour lesquelles les polices d'icônes sont si populaires est qu'elles sont polyvalentes et faciles à utiliser. Grâce à un format évolutif qui peut être installé en quelques clics sur la plupart des systèmes de gestion de contenu, presque tout le monde peut commencer à utiliser rapidement les polices d'icônes.

Le véritable avantage d'une police d'icônes est que l'élément utilise CSS et n'est pas un fichier image indépendant. C'est bon pour créer un site Web allégé avec des éléments qui se chargent rapidement et dans un format vectoriel (idéal si vous devez changer la taille plus tard).