Des webfonts pour les icônes Des webfonts pour les icônes

Des webfonts pour les icônes

par ,
le 21 octobre 2014

0
0

Après avoir vu avec Stéphane Dailly comment optimiser vos icônes pour les écrans Retina, je vous propose de découvrir une autre technique : celle des iconfonts.

Au départ, la technique du sprite permettait essentiellement une optimisation du chargement des pages quand on s’est aperçu qu’il était préférable de charger une grosse image plutôt qu’un nombre conséquent de petites images. Ainsi, on a commencé à créer des sprites contenant la plupart des éléments décoratifs que l’on pourrait retrouver sur le site. Sauf que lorsqu’on commence à avoir des icônes de plusieurs tailles et plusieurs couleurs, cela devient vite un cauchemar à gérer. Puis les fameux écrans « Retina » ont commencé à arriver, nous obligeant en plus d’avoir une version doublée de nos sprites.

sprite

Les iconfonts à la rescousse !

C’est donc sur ce postulat que l’utilisation des iconfonts va nous simplifier la vie. Le principe est assez simple : il s’agit d’utiliser une police d’écriture dans laquelle on va remplacer certains caractères par des glyphes représentant nos icônes. Ainsi, on va donc pouvoir bénéficier de la flexibilité d’une police d’écriture pour le changement de couleur mais aussi de taille. En effet, les icônes étant en vectoriel, le changement de taille ne les pixellisera pas.

Voici un exemple où l’on va avoir une icône « maison » pour le retour à l’accueil et que l’on aura défini sur la lettre « a » :

#css
.icon { font-family : 'myIconFont'; }
#html
<i class="icon">a</i>

Le problème de cet exemple, c’est qu’en termes d’accessibilité, et bien ce n’est vraiment pas le top : en effet, la lettre « a » sera interprétée par les lecteurs d’écran… Ainsi, on va plutôt utiliser le pseudo-element « before » avec les caractères de la Private Use Area (PUA), ce qui donnerait ça :

#css
[class*="icon-"]:before { 
font-family: 'myIconFont';
}
.icon-home:before  { content:"\e000"; }
.icon-search:before { content:"\e001"; }
#html
<i class="icon-home"></i>

Comment générer une iconfont ?

Dans un premier temps, il va falloir que vous exportiez vos icônes, une par une, au format SVG. Lors de l’export, vérifiez bien que vos icônes fassent au moins 500 pixels par 500 pixels. De plus, pensez bien à ce qu’il n’y ait aucun vide autour de votre icône sinon ce vide fera parti de l’espace occupé par l’icône, à moins que ce soit voulu évidemment.

Pour générer une iconfont, il est possible de passer par un service en ligne tel qu’Icomoon, mais il existe une méthode bien plus pratique pour cela. A l’heure où les task runners tels que Grunt ou Gulp sont de plus en plus à la mode dans notre workflow, je vous propose de voir comment faire avec le dernier.

Une fois que vous avez installé Gulp, installez les packages gulp-iconfont et gulp-iconfont-css dans votre projet.

Puis créez votre tâche Gulp :

var iconfont = require('gulp-iconfont')
var iconfontCss = require('gulp-iconfont-css')
gulp.task('glyphicons', function() {
return gulp.src('static/icons/*') // emplacement des icônes en SVG
.pipe(iconfontCss({
fontName: 'icons', // nom de l’iconfont
targetPath: '../css/ icons-font.css', // emplacement de la CSS finale
fontPath: '../fonts/' // emplacement de la font finale
}))
.pipe(iconfont({
fontName: 'icons', // nom de l’iconfont
normalize: true // si vos icônes n’ont pas la même taille, redimensionnement en prenant la taille la plus grande
}))
.pipe( gulp.dest('static/fonts/') )
}) ;

Les iconfonts, la solution parfaite ?

Comme toute solution, l’utilisation des webfonts n’est pas parfaite. En effet, on ne pourra notamment pas avoir d’icônes de plusieurs couleurs dans une iconfont ou alors il faudra ruser pour cela : on pourra par exemple utiliser le pseudo-element « after » en plus du « before » pour avoir une icône bicolore…

Conclusion

Dans tous les cas, cette technique est sans doute à privilégier dans le cadre d’un site responsive et compatible IE8+ pour remplacer nos sprite.png. Accompagnée d’un task runner, cela devient qui plus est vraiment simple à maintenir contrairement au sprite, donc pourquoi s’en priver ?

mots-clés :

, , ,

articles à lire ensuite...

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

0
0

Des webfonts pour les icônes