Les polices de caractères icôniques

Publié dans: 

On définit une icône comme étant un symbole graphique affiché à l'écran et associé à un objet (ou à une fonction) auquel il permet d'accéder lorsqu'il est sélectionné par un dispositif de pointage. Mettre des icônes près des boutons vise à faciliter l’identification des fonctionnalités à l’utilisateur afin de mieux le guider. C’est la raison pour laquelle le designer graphique essaye de traduire au maximum la fonctionnalité à représenter en une image significative, claire et précise.

Toutefois, dans le web, attribuer une image à chaque fonctionnalité, lien ou bouton alourdit considérablement le temps de chargement de la page avec tous les vas et vient pour récupérer chaque image depuis le serveur. Alors quelles sont les meilleures approches pour remédier à ce problème ?

Utilisation des sprites 

Exemple : Sprite des icônes jquery-ui

C'est une technique qui consiste à regrouper plusieurs images en une seule et à ne sélectionner que la zone que l'on veut afficher. Cela devient possible grâce à la propriété de style background-position qui détermine quelle image et quelle icone va-t-on utiliser pour marquer notre bouton ou notre lien. Notons dans notre exemple que toutes les icones utilisées ont la même taille, ceci ne peut qu’homogénéiser les boutons et les liens dans nos pages web. Techniquement, l’utilisation de ces icônes se réduit à un simple code de style comme le suivant :

  .icone li {{
     width: 16px;
     height: 16px;
     display: inline-block;
     background: url("sprite.png") no-repeat;
}

.icone .icone-1 { background-position: left bottom; }
.icone .icone-2 { background-position: 16px bottom; }
.icone .icone-3 { background-position: 16px bottom; }
.icone .icone-4 { background-position: 16px bottom; }
.icone .icone-5 { background-position: 16px bottom; }
.icone .icone-6 { background-position: right bottom; }

Cependant, les effets de survol d’icône et de changement de couleur nécessitent l’application d’une nouvelle icône et donc un travail supplémentaire par notre designer qui va nous fournir encore plus d’icônes si ce n’est le double.

Utilisation des SVG

Le SVG (Scalable Vector Graphics) est un format de dessin vectoriel, élaboré à partir de 1998 par un groupe de travail comprenant entre autre IBM, Apple, Microsoft, Xerox. Ce type d’icône a plusieurs avantages dont principalement la légèreté lorsqu’il s’agit de présenter les formes simples, car contrairement au format JPG, PNG et GIF qui doivent mémoriser le contenu pixel par pixel, seuls les informations décrivant les formes sont stockées (coordonnées, couleurs, effet). Ce principe le rend plus efficace surtout pour l’étaler sur une surface plus importante sans perdre la qualité de l’image.
Pour pouvoir utiliser ce format, on peut faire appel à la balise img :

<img src="home.svg" alt="Accueil">

ou grâce au fichier de style comme le montre l’example suivant :

.home {
 background : url("home.svg") no-repeat left left ; 
}

On peut aussi inclure le code descriptif de l'image en base64 grace aux multiples convertisseurs gratuits disponibles et ceci dans le but d'éviter de charger les objets svg et de remplacer son code dans les feuilles de style. On peut alors soit utiliser ce code dans la balise img directement dans le html ou mieux dans le css :

background-image: url(data:image/png;base64,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);

Grâce aux nouveaux navigateurs, la balise svg a été ajoutée pour faciliter la manipulation de ces objets, mais l’utilisation des svg n’est pas la meilleure solution surtout si on cherche à avoir une compatibilité cross-navigateurs, voici une liste qui reprend les navigateurs compatibles avec ce format. Peut-t-on mieux faire ?

Les polices d'icône

Se basant sur les glyphes, les polices d’icônes sont simplement une police d’écriture où on a remplacé certains caractères par des symboles représentant les caractères qu’on veut utiliser. Ces icônes monochromatiques deviennent très utiles dans le design de l’interface utilisateur lorsqu’on a besoin d’une simple icône qui n’embrouille pas l’utilisateur. Ayant la flexibilité d’une police d’écriture car vectorielle, il est très simple d’en changer la taille et la couleur en ajoutant le style adéquat. D’ailleurs, on peut même aller plus loin en changeant la couleur progressivement pendant le survol  de l’icône grâce au nouvelles propriétés ajoutés en CSS3, on peut même ajouté un effet d’ombrage grâce à la propriété.
Pour pouvoir charger notre nouvelle police d’icônes, on fera appel à la propriété de style @font-face dans notre fichier de style, voici un exemple :

@font-face {
	font-family : 'my-font' ;
	src : url('fonts/my-font.eot') ;
	src : url('fonts/my-font.eot ?#isfix') format ('embedded-opentype'),
  	        url('fonts/my-font.svg#my-font') format ('svg'), 
    	        url('fonts/my-font.woff’) format ('woff'),
        url('fonts/my-font.ttf') format ('truetype') ;
        font-weight : normal;
        font-style : normal;
}

Et pour ajouter notre icône, on peut utiliser la manière simple d’ajouter la propriété data-icon="value" où la value est la valeur qui correspond à notre icône dans le fichier de police. Le reste est géré par le style comme le montre le code suivant :

[data-icon] : before {
        font-family : ‘my-font’ ;
        content : attr(data-icon) ;
        speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

Remarquons qu’on reprit la propriété font-wight : normal dans le but d’éviter que le navigateur force le gras si par exemple notre bouton était stylé en gras.
Bien sûr, on peut utiliser des packs gratuits sur internet comme le pack The Icon disponible sur le github, glyphicons ou la suite entypo. Le problème de ces packs, c’est qu’on va télécharger tout le pack alors qu’on aura besoin que de quelques icônes spécifiques. Encore, ça sera mieux qu’on obtienne notre propre police à partir des icônes que notre designer nous a fournis. Actuellement, des services gratuits se sont lancés comme fontello et icomoon. Ces services servent à télécharger des icônes spécifiques et pas en pack., mais aussi à faire l’upload de nos propre icônes et d’en générer des polices. Voici comment on peut générer notre propre police sur icomoon :

Commençons par l'upload de nos icônes graphiques en format svg.

notre icône sera ajoutée sous la rubrique Untitled set, bien sûr, on aurait pu ajouté plus qu'une icône à la fois. Un outil de prévisualitsation de rendu est disponible pour effectuer quelques modifications simple sur l'image. On peut alors attribuer un caractère ou une suite de caractères pour identifier notre icône par la suite dans notre fichier de style

Enfin, il nous reste qu'à obtenir notre police en cliquant sur le bouton font> en bas de la page. Le zip téléchargé contient alors les fichiers de police en format eot, svg, ttf et woff, en plus d'un exemple de page en html avec le style nécéssaire.

Pour finir, il suffit la propriété :before de notre selecteur dans la page de style et indiquer les deux propriétés font-family et content, aussitôt notre icône précèdera. plus généralement, nos classes de style peuvent être écrites comme suivant :

[class^="icon-"], [class*=" icon-"] {
	font-family: 'my-font';
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
	content: "\e600";
}
.icon-office:before {
	content: "\e603";
}
.icon-newspaper:before {
	content: "\e604";
}
.icon-pencil:before {
	content: "\e605";
}

on pourra ainsi obtenir un effet de changement de couleur dégradé lors du survol de l'icône grâce au style suivant :

.icon-home
		{
		-webkit-transition-property:color, text;
		-webkit-transition-duration: 1s, 1s;
		-webkit-transition-timing-function: linear, ease-in;
		-moz-transition-property:color, text;
		-moz-transition-duration:1s;
		-moz-transition-timing-function: linear, ease-in;

		-o-transition-property:color, text;
		-o-transition-duration:1s;
		-o-transition-timing-function: linear, ease-in;
		}
	.icon-home:hover{
		color:red;
		}
  : effet suite au passage de la souris.