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
|
<span class="n">namespace</span> <span class="p">:</span><span class="n">icons</span> <span class="k">do</span> <span class="n">task</span> <span class="p">:</span><span class="n">compile</span> <span class="k">do</span> <span class="nb">puts</span> <span class="s2">"Compiling icons..."</span> <span class="nb">puts</span> <span class="o">%</span><span class="n">x</span><span class="p">(</span><span class="n">fontcustom</span> <span class="n">compile</span><span class="p">)</span> <span class="k">end</span> <span class="k">end</span> |
4- Créer un fichier fontcustom.yml dans config avec les options suivantes :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
|
<span class="c1">#config/fontcustom.yml</span> <span class="s">font_name</span><span class="pi">:</span> <span class="s">icons</span> <span class="s">css_selector</span><span class="pi">:</span> <span class="s">.icon-{{glyph}}</span> <span class="s">preprocessor_path</span><span class="pi">:</span> <span class="s2">"</span><span class="s">"</span> <span class="s">autowidth</span><span class="pi">:</span> <span class="s">false</span> <span class="s">no_hash</span><span class="pi">:</span> <span class="s">true</span> <span class="s">force</span><span class="pi">:</span> <span class="s">false</span> <span class="s">debug</span><span class="pi">:</span> <span class="s">false</span> <span class="s">quiet</span><span class="pi">:</span> <span class="s">false</span> <span class="s">input</span><span class="pi">:</span> <span class="s">vectors</span><span class="pi">:</span> <span class="s">app/assets/icons</span> <span class="s">output</span><span class="pi">:</span> <span class="s">fonts</span><span class="pi">:</span> <span class="s">app/assets/fonts</span> <span class="s">css</span><span class="pi">:</span> <span class="s">app/assets/stylesheets</span> <span class="s">templates</span><span class="pi">:</span> <span class="pi">-</span> <span class="s">scss</span> |
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 :
|
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
Après l’installation et la compilation, rien de plus simple pour l’utilisation dans vos vues :
|
<span class="nt"><span</span> <span class="na">class=</span><span class="s">"icon-utilisateur"</span><span class="nt">></span></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 :
Sources :