Utiliser une police d’icônes pour les réseaux sociaux

Snapchat network
Copyright : Thought Catalog

Les réseaux sociaux sont aujourd’hui des moyens de dissémination indéniables pour les sites Web. Toutes les entreprises qui travaillent sur leur stratégie de communication digitale sont obligées de réfléchir à comment aborder les réseaux sociaux. Une entité a tout intérêt à se construire une communauté sur ces plateformes pour avoir une certaine visibilité sur la toile.

Ainsi les icônes des réseaux sociaux, reconnaissables d’entre mille, sont largement utilisées sur les sites Web. Utiliser une image pour les présenter, c’est bien ; utiliser une police d’icônes, c’est encore mieux ! Ci-dessous une synthèse de ce qu’implique l’utilisation d’une police pour les icônes des réseaux sociaux.

Les avantages d’une police pour les icônes

Utiliser une police pour les icônes ou tout autre petite image telle qu’un logo possède des atouts indéniables. Cette solution est, dans la plupart des cas, la meilleure en termes de légèreté. Quand on pense à l’optimisation d’un site, on s’inquiète du poids des pages que l’on construit. Utiliser une police peut s’avérer être une solution plus souple que l’ajout d’un certain nombre d’images pour chacun des réseaux sociaux ou l’utilisation d’un sprite regroupant ces icônes.

Utiliser une police d’icônes permet en outre d’éviter la pixellisation d’une image sur écran mobile. En effet, de nos jours, une page sur le Web est amenée à être consultée sur un nombre indéfini de terminaux. Il existe des smartphones de toutes dimensions et un nombre de marques de mobiles incommensurable. L’avantage de l’utilisation d’une police est d’obtenir des icônes parfaitement optimisées pour les différents supports.

Aussi, l’utilisation d’une police permet aussi de rapidement pouvoir modifier les icônes : changer la couleur d’un pictogramme, augmenter sa taille, y ajouter de l’ombre, proposer des effets sur les contours, agir sur leur opacité ou même en faire des dégradés. On pourrait imaginer un certain nombre d’actions complètement folles sur ces implémentations grâce au langage CSS.

Enfin, on peut générer des comportements à l’infini à ces icônes. On peut avoir un comportement pour le survol de l’image, pour le focus ; ajouter des fonds colorés à tout moment. Utiliser une police d’icônes est définitivement une bonne pratique.

Quelques précautions à prendre…

Mettre en place une police d’icônes de réseaux sociaux est possible grâce à la propriété font-face en CSS. Cependant, avant d’adopter cette solution, il est crucial de prendre en considération les deux points suivants.

Si vous souhaitez utiliser une icône à l’aide de caractères définis dans une police en CSS, n’oubliez pas de prendre en considération les robots des moteurs de recherche. Imaginons par exemple que vous utilisiez une police pour générer le logo de votre site, et que vous y ajoutiez un lien. Sachez que les caractères choisis pour ce logo seront ceux sur lesquels seront référencés le nom de votre site. En se basant sur cet exemple, vous comprendrez aisément qu’il faut choisir avec parcimonie quelles icônes seront remplacées, et surtout comment.

Il faut également penser à la compatibilité des navigateurs. Le support de la propriété font-face est total pour Internet Explorer à partir de la version 9, bien que certaines utilisations soient possibles déjà pour la version 8 de ce navigateur. À ce jour, il faut totalement oublier webOS et Opera Mini. Tout dépend donc du trafic et des utilisateurs ciblés. Tenez-vous au courant de l’évolution de ce support, et prévoyez, si besoin est, des solutions pour les autres navigateurs.

La police Mono Social Icons Font

À titre d’exemple, la police Mono Social Icons Font est entièrement composée d’icônes de réseaux sociaux dont 500px, Amazon, AOL, Apple, Behance, Bing, Blogger, Delicious, Deviantart, Ebay, Facebook, Google +, Grooveshark, iTunes, LinkedIn, MSN, Soundcloud, Twitter, et bien d’autres encore.

Le site proposé par son designer, Ivan Drinchev, est aussi developer-friendly. Il explique comment intégrer cette police, propose de personnaliser les icônes sous la forme d’un carré ou d’un cercle et offre un lien du projet sur Github. Surtout, cette police a l’avantage d’être libre de droits, à la fois utilisable sur des projets personnels comme professionnels.

2 réflexions sur « Utiliser une police d’icônes pour les réseaux sociaux »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.