Utilisation de Fontastic

http://app.fontastic.me/

Qu'est-ce que Fontastic ?

Fontastic est un générateur en ligne de polices d'icônes, il permet de créer sa propre bibliothèque d’icônes et de l’exporter très facilement.

On peut choisir les icônes dont on a besoin, et Fontastic s'occupe de générer à partir de fichiers vectoriels la police composée des icônes choisies qui seront exportées dans un package. 

Pourquoi utiliser Fontastic ?

Tout d'abord, la police sera plus rapide à charger si l'on ne sélectionne que les icônes dont on a besoin. Ensuite, il est vraiment très facile de personnaliser l'utilisation de la police en attribuant des noms de classes, et en ajoutant ou supprimant des icônes. Enfin, cela permet d'avoir un seul espace de stockage, à jour, contenant toutes les icônes et polices d'icones nécessaires à nos différents projets.

Comment utiliser Fontastic ? 

Une fois connecté sur l'interface :

Le bouton « New Font » vous permet de créer une nouvelle font pour le projet que vous souhaitez. Plusieurs projets peuvent ici être stockés.

« Modify Font » permet de modifier le nom de la font ou de choisir le préfixe de la classe CSS :

Le préfixe influence le nom de la classe :

Il est ensuite possible de sélectionner les icônes que l’on souhaite parmi les packs proposés de base ou ceux que l’on a créé.

Pour créer un pack il faut importer nos icônes à l’aide du bouton « add more icons » en fin de page.

Il est également possible de customiser (menu customize) le nom des icônes afin d’interagir sur le nom de leurs classes :

Ainsi on aura comme nom de classe « icon-cabin », « icon-animaux » etc, que l'on peut ici personnaliser.

Enfin, on peut publier la police en ligne, ou télécharger le package complet afin d’installer la police sur un projet.

Fontastic génère un dossier compressé composé des styles CSS, des fichiers fonts et d'une page d'exemple présentant les icônes : 

Et voilà, votre police d'icônes personnalisée est prête !