Une police d’icônes de réseaux sociaux

Mono Social Icons
DRiNCHEV

Je viens de tomber sur le lien utile du jour : une police entièrement faite d’icônes de réseaux sociaux. Ça pourrait vous sembler être une idée farfelue, ou alors un lien simplement utile pour les graphistes. Mais grâce à la propriété font-face en CSS, un panel de possibilités s’ouvre également aux développeurs.

Quoi qu’il en soit, profitez ici de la Mono Social Icons Font. Celle-ci propose un grand nombre de réseaux sociaux représentés : 500px, Amazon, AOL, Apple, Behance, Bing, Blogger, Delicious, Deviantart, Ebay, Facebook, Google +, Grooveshark, iTunes, LinkedIn, MSN, Soundcloud, Twitter, et bien d’autres encore ! Et avec Mono Social Icons, il est aussi possible de profiter de toutes ces icônes sous la forme d’un carré et d’un cercle.

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 par exemple, possède certains atouts indéniables. L’un des premiers avantages qui me vient à l’esprit est la légèreté de la solution. Quand on pense à l’optimisation d’un site, on s’inquiète forcément 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 d’un sprite (selon la taille de ce sprite).

Utiliser une police d’icônes permet également 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 des marques de mobiles à ne plus savoir compter ! L’avantage de l’utilisation d’une police est d’obtenir des icônes parfaitement optimisées pour les différents supports. J’ai largement pu observer cette pratique sur l’un des mes anciens projets professionnels.

Aussi, l’utilisation d’une police permet aussi de rapidement pouvoir modifier les images : changer la couleur d’un pictogramme, en modifier sa taille ou encore y ajouter de l’ombre, des effets sur les contours, 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 ! On peut changer l’opacité de ces icônes.

Et 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, encore ajouter des fonds colorés à tout moment. Utiliser une police d’icônes est définitivement une bonne pratique !

Quelques précautions à prendre cependant…

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.

Et, il faut aussi 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. Il faut totalement oublier webOS et Opera Mini. Bon, vous me direz que ça va compte tenu des navigateurs que j’énonce, mais tout dépendra du trafic que vous ciblez. Tenez-vous au courant de ces évolutions, et surtout prévoyez, si besoin est, des solutions pour les autres navigateurs.

2 réflexions sur « Une police d’icônes de réseaux sociaux »

Laisser un commentaire

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