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

brew install fontforge --with-python

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

namespace :icons do
  task :compile do
    puts "Compiling icons..."
    puts %x(fontcustom compile)
  end
end

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

#config/fontcustom.yml

font_name: icons
css_selector: .icon-{{glyph}}
preprocessor_path: ""
autowidth: false
no_hash: true
force: false
debug: false
quiet: false

input:
  vectors: app/assets/icons

output:
  fonts: app/assets/fonts
  css: app/assets/stylesheets

templates:
 - scss

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 :

rails icons:compile

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

create app/assets/fonts/icons.ttf
       app/assets/fonts/icons.svg
       app/assets/fonts/icons.woff
       app/assets/fonts/icons.eot

create app/assets/stylesheets/_icons.scss

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

*= require _icons

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

<span class="icon-utilisateur"></span>

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 :

rails icons:compile

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.