Générer une font avec des icônes en rails

Une « fonte-icône » est une police qui utilise des glyphes représentant des icônes vectorielles. Très pratique, car on peut facilement changer la couleur, la taille en css. En plus de leur flexibilité, les polices d’icônes permettent un gain de performance puisqu’il suffit de charger un fichier de police pour avoir accès à beaucoup de caractères.

Nous allons voir comment mettre en œuvre une police d’icônes personnalisée avec Rails.

Nous allons utiliser la gem ‘fontcustom’ de Rails. Cette gem nécessite Ruby 1.9.2+ et FontForge.

1- Installation de fontforge

Si vous avez besoin de Xquartz lors de l’installation de fontforge, vous pouvez le télécharger ici.

2- Ajouter la gem ‘fontcustom’ à votre Gemfile (puis faire un bundle update)

3- Ajouter une tâche rake en créant un fichier /lib/tasks/icons.rake

4- Créer un fichier fontcustom.yml dans config avec les options suivantes :

On va mettre nos icônes svg dans le dossier app/assets/icons. Les fichiers pour la police compilés se mettront dans le dossier app/assets/fonts.

5- Faire la commande suivante pour compiler les icônes :

En regardant votre arborescence, vous verrez que des fichiers ont été créés :

6- Importer le fichier _icons.scss dans votre application.scss

Après l’installation et la compilation, rien de plus simple pour l’utilisation dans vos vues :

Pour connaître les noms des classes, il faut aller voir le fichier _icons.scss qui contient ces noms.

Si on ajoute ou supprime une icône dans le dossier, il suffit de recompiler avec la commande suivante :

Sources :

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.