12 outils et fonts indispensables pour gérer vos polices d’icônes

20 mai 2014

La police d’icônes est une technique CSS très pratique pour illustrer du contenu tout en bénéficiant de la flexibilité d’une police web. Megaptery vous propose de découvrir 12 outils et fonts indispensables pour bien choisir et administrer vos polices d’icônes.

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

Une police d’icônes, aussi appelée icon font, est une police d’écriture dont on a remplacé certains caractères par des glyphes qui représentent des icônes. La police d’icônes s’utilise donc comme n’importe quelle font dite « exotique », c’est-à-dire en passant par la déclaration CSS @font-face. De ce fait, les icônes sont vectorielles et bénéficient de la flexibilité d’une police : on peut ainsi changer très facilement la taille et la couleur de chaque icône via CSS, voire même d’appliquer des ombrages avec text-shadow.

Elle a notamment tendance à remplacer le sprite CSS qui, même si Sass nous facilite grandement la tâche pour le générer automatiquement, n’est pas très pratique dès lors qu’on veut simplement changer la couleur ou la taille d’une icône. L’utilisation d’une icon font devient alors un véritable gain de temps. Voici donc une liste non exhaustive des polices d’icônes les plus complètes du marché ainsi que plusieurs outils de gestion pour vous simplifier la vie.

1. Foundation Icon Fonts 4. IcoMoon 7. CSS3 Maker 10. We Love Icon Font
2. Font Awesome 5. Socicon 8. FlatIcon 11. Map Icons
3. Fontello 6. Stackicons 9. Forecast Font 12. Font Custom

1. Foundation Icon Fonts

Vous l’aurez deviné, Foundation Icon Fonts est la police d’icônes conçue par Zurb pour son framework Foundation. Il s’agit d’un kit complet de plus de 280 icônes classées par catégorie (général, édition de texte, média, social, etc), idéal pour les utilisateurs de Foundation, mais pas seulement car vous pouvez bien sûr l’utiliser indépendamment du framework. À noter que les fichiers SVG sont également fournis dans l’archive.

foundation_icon_fonts

2. Font Awesome

C’est sûrement une des polices d’icônes les plus connues et les plus utilisées du moment. Conçu pour le framework Bootstrap (qui utilise officiellement Glyphicons (200+) depuis la version 3), Font Awesome regroupe plus de 360 icônes réparties dans plusieurs thèmes, avec la possibilité d’appliquer différents types d’encadrement, des rotations et inversions, ou encore de mettre en mouvement les icônes avec simplement des classes CSS. Une typographie gratuite en constante évolution qui est probablement la plus complète du marché.

font_awesome

3. Fontello

Fontello est l’outil ultime pour générer une polices d’icône. En effet, ce service en ligne regroupe une quinzaine de fonts (parmi lesquelles Font Awesome) et vous donne la possibilité de venir sélectionner les icônes une par une pour construire votre « propre » typographie. Vous pouvez donc combiner plusieurs fonts existantes, mais aussi ajouter vos propres icônes SVG et modifier le nom et le code correspondant. Mieux encore, vous pouvez modifier les métriques (interligne, jambage, etc). Ainsi, plutôt que d’utiliser une typographie complète avec beaucoup d’icônes embarquées, vous ne chargez que les icônes dont vous avez besoin.

fontello

4. IcoMoon

IcoMoon est le principal conccurent à Fontello. En effet, c’est un service en ligne générateur de police d’icônes personnalisée très complet : il permet aux utilisateurs de sélectionner les icônes dont ils ont besoin parmi une liste d’une vingtaine de polices (parmi lesquelles Font Awesome, mais aussi quelques fonts payantes), personnaliser plusieurs paramètres (taille, couleur, etc), puis de les récupérer sous forme d’une icon font. Il est même possible de générer des sprites CSS et, comme pour Fontello, le paramètrage des icônes est assez poussée.

  • Nombre d’icônes : 3500+
  • Site : http://icomoon.io/
  • Licence : en fonction des polices utilisées

icomoon

5. Socicon

Socicon est une police d’icônes spécialement dédiée aux réseaux sociaux. Vous y retrouverez tous les services actuels, de Twitter à Facebook, en passant par Instagram, Skype ou encore GitHub. C’est la solution idéale pour relier votre portfolio à vos réseaux sociaux favoris. À signaler que même les français Viadeo et Dailymotion font parti de la liste. Sinon, vous pouvez vous tourner vers Zocial (100+) ou Mono Social Icons Font (90+) qui proposent davantage d’icônes sociales.

socicon

6. Stackicons

Stackicons est une police qui a la particularité d’être « multi-color ». Toujours dans le domaine des réseaux sociaux, cette font a été méticuleusement conçue avec Sass pour que chaque icône affiche les différentes couleurs de son logo, et être disponible sous cinq formes de bouton (icône seule, cercle, carré, etc). Vous pouvez bien sûr modifier les jeux de couleur via les variables Sass, ou repasser en mode monochrome. L’idée est plutôt originale et très réussie.

stackicons

8. FlatIcon

FlatIcon est une immense base de données d’icônes vectorielles libres vous permettant de télécharger des milliers d’icônes au format SVG, PSD ou PNG. Comme pour Fontello et IcoMoon, vous pouvez convertir en ligne les icônes sélectionnées en une police d’icônes. Il existe même un plugin gratuit pour Photoshop qui vous permet de trouver rapidement toutes les icônes dont vous avez besoin sans quitter votre environnement de travail.

flaticon

9. Forecast Font

Forecast Font est une police permettant d’afficher de superbes pictogrammes colorés sur le thème de la météo. Comme pour Stackicons (décrit plus haut), la police est modulable pour pouvoir jouer avec les couleurs et créer un style bien spécifique. Au programme : nuages, soleil, pluie, etc. Bref, à vous de faire la pluie et le beau temps ! Je vous conseille de jeter un œil sur Meteocons (40+), Climacons (70+) et Weather Icons (90+) qui proposent aussi des packs météo de qualité.

icons_font_weather

10. WLIF

WLIF pour « We love icon fonts » est un service en ligne qui héberge plusieurs typographies comme le fait Google Fonts à la différence près que vous n’y trouverez que des polices d’icônes gratuites et open source. Héberger certains fichiers ailleurs que sur son serveur est une pratique qui n’est pas idéale pour certains, voire à proscrire, mais qui peut s’avérer parfois très utile. Voici la liste complète comprenant les principales fonts du moment : Brandico, Entypo, Font Awesome, Fontelico, Iconic Fill / Stroke, Maki, OpenWeb Icons, Typicons et Zocial.

we_love_icon_fonts

11. Map Icons

Map Icons est une police de marqueurs de localisation dédiée à la cartographie, et plus particulièrement à Google Maps. Classé par point d’intérêt (restaurant, magasin, santé, sport, transport, etc), chaque icône s’intègre parfaitement dans Google Maps sous forme d’image simple ou de SVG, dont vous pouvez changer la couleur et la taille via les options de l’objet marker. Dans le même registre, Maki (110+) et Symbola (260+) sont pas mal non plus.

map_icons

12. Font Custom

Font Custom est une application qui vous permet de construire votre propre typographie en lignes de commande (sous Linux ou Mac OS) à partir d’un répertoire rempli d’icônes au format SVG. Les commandes vont générer les différents formats qui composent une font, ainsi qu’un fichier CSS prêt à emploi. Plutôt pratique. Il existe également Hieroglyph qui propose un service similaire.

font_custom

Commentaires

  • Vlad

    Bravo pour toutes ces ressources, ton site est extraordinaire pour le jeune développeur web que je suis !

  • Récemment, Google a aussi mis à disposition des icônes libres pour le développement web et mobile, elles sont disponibles sur GitHub :
    https://github.com/google/material-design-icons
    Si ça peut compléter ;-)