• A la une
  • Catégories
  • Dossiers
  • +

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

par Benjamin SANCHEZle 07/11/2017

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.

 

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir