Découvrez Fontello, un outil pour mélanger et trier les polices d’icones

Aujourd'hui le BlogDuWebdesign vous propose de faire subir un petit régime à vos font iconiques grace à Fontello, un outil permettant de ne garder que les icônes nécessaires.

Les fonts iconiques

Je ne vais pas vous faire un paragraphe complet sur les web font iconiques, c'est un sujet vraiment très démocratisé, et je suis sur que tout le monde parmi vous en a déjà utilisé au moins une dans sa vie. Si ce n'est pas votre cas, je vous conseil de vous pencher sur leur utilisation d'urgence !

Bien que ces outils soient vraiment très pratique, ils souffrent de plusieurs défaut genant, dont un surpoid qu'ils font suppporter à nos sites web. En effet, il est la norme d'importer une font complète pour à peine quelques icones nécessaires.

Pire encore est l'idée qui dit que si les icones nécessaires ne peuvent pas être trouvé sur une unique font, il suffit d'en importer deux différentes ! Nous auroins tout à gagner à remplacer e genre de pratique très courrante en production par une alternative extrèmement simple, l'utilisation d'outils comme celui que je vais vous présenter aujourd'hui : Fontello.

Fontello c'est quoi ?

En quelques mots, Fontello est un outil permettant d'agréger plusieurs fonts iconiques entre elles, pour ensuite vous permettre de les trier et ne garder que les icônes dont vous avez besoin dans vos projets.

De cette manière, plus besoin d'importer plusieurs fonts pour combler tous vos besoins, et surtout plus besoin d'importer une fonte complète juste pour ces petits boutons Facebook et twitter !

Le fonctionnement est très simple : sélectionnez les icônes dont vous avez besoin dans les listes disponibles, homogénéisez les noms de classes, éventuellement vérifiez qu'aucun glyphe n'entre en conflit et vous êtes bon, il ne reste plus qu'à télécharger votre police !

Et si vous avez besoin d'un icone ou d'une police qui n'est pas dans la base ? Ajoutez là en la droppant (au format svg) sur la petite zone prévu à cet effet !

Sur l'exemple suivant par exemple, j'ai ajouté la police Fontisto.

Enfin, si vous avez envie d'aller plus loin, il est possible d'accéder à des options avancée pour parametrer encore plus votre police.