{"partition": "head_middle", "source_domain": "www.alsacreations.com", "digest": "sha1:SMZA5KEST2MERWK6OCJJRXB6ZYQAUOA7", "path": "/lustre/fsn1/projects/rech/qgz/uzq54wg/processed_redpajama/base_processing/output/fr/2014-15/000_00026.parquet"}
Aller à la recherche TutorielsAstucesOutilsLivresQuiz Niveau : Créer une police d’icônes facilement à partir d’illustrations vectorielles
Les polices d'icônes ou "font-icon" popularisées depuis Bootstrap sont de plus en plus utilisées sur le web. Certains services proposent de piocher des icônes dans différents packs pour se créer sa propre "police". Dans ce petit tutoriel nous verrons comment, grâce au service en ligne IcoMoon, il est facile de se créer sa propre police d'icônes à partir d'illustrations et fichiers vectoriels.	Tutoriel par Stéphanie W. (Graphiste - Designer Web et mobilité, Strasbourg)
Créé le 10 Avril 2013, mis à jour le 20 Juillet 2013 (31394 lectures)
Tags : police, font, icone, svg
Une fonte-icône est tout simplement une police d’écriture dont on aura remplacé certains caractères par des glyphes représentant les icônes que l’on veut utiliser. Très utiles dans le design d’interface lorsque l’on a besoin d’une simple petite icône monochrome, elles ont la flexibilité d’une police d’écriture : vectorielles, il est très facile d’en changer la taille et la couleur en CSS, voire d’y ajouter de l’ombrage avec text-shadow.
Outre leur flexibilité elles permettent un gain de performance puisqu’il suffit de charger une police (un fichier) pour avoir accès à un nombre important de caractères. En Unicode, on peut exploiter des glyphes bien au-delà de nos caractères européens classiques. Ce sont d’ailleurs des parties appelées "Supplementary Private Use Area" qui sont désormais privilégiées pour éviter des problèmes d’accessibilité avec la « lecture » non appropriée de l’icône par les lecteurs d'écran. La police d'icone s'utilise dans le CSS comme n'importe quelle police "exotique" grâce à la déclaration @font-face.
Voir une petite démonstration en ligne : Icon Font are Awesome.
Le placement de l’icône se fait généralement grâce à une balise <i> ou <span> (inoffensive par défaut) qui va utiliser en classe le nom de l’icône que le souhaite afficher. C’est ensuite la pseudo-classe :before qui va permettre d’appliquer l'icône sur cet élément.
&lt;i class="icon-camera-retro"&gt;&lt;/i&gt;
&lt;span data-icon="" class="mrs"&gt;&lt;/span&gt;
Vous trouverez facilement différents packs d’icônes comme Font Awesome mais également en créant votre propre pack en piochant dans d’autres librairies sur Fontello. Dans ces deux cas il vous suffira de récupérer les polices créées et copier/coller la classe de l’icône que vous souhaitez utiliser.
Mais qu’en est-il si vous souhaitez utiliser vos propres icônes pour créer votre police pour votre projet ?
L’outil en ligne IcoMoon crée facilement - et sans une ligne de code - une police personnalisée à partir d’icônes que vous aurez designées sur Adobe Illustrator (Inkscape fonctionne très bien aussi).
Exporter mes icônes au format SVG
IcoMoon, en plus de proposer de piocher dans différentes librairies d’icônes, vous propose une option d’import. Pour cela, vous aurez besoin de fichiers au format SVG que l’ont peut générer avec Inkscape (mais dans cette démonstration Illustrator sera exploité). Michel Tomas a partagé un script Illustrator très utile qui va permettre automatiquement et en seul clic d’exporter toutes les icônes d’un document Illustrator pour peu qu’elles soient chacune dans un calque. Le script « Ai SVG export » est disponible sur Github.
Pour l’utiliser il suffit de le copier dans le dossier de scripts d’Illustrator, en double-cliquant dessus ou en l’important via Fichier > Scripts > Autre scripts… Il vous suffit ensuite de configurer la fenêtre qui s’ouvre pour y indiquer vos préférences de dossier et de nommage de fichier. L’intérêt de ce script est que vous pouvez très rapidement automatiser le processus pour exporter beaucoup d’icônes en même temps.
Quelques conseils sur les icônes pour un résultat optimal :
La couleur de votre icône de base importe peu, dans tous les cas lors de l’import elle sera noire.
Vous pouvez tricher avec un effet « gris » trompe l’œil en rayurant votre icône. De loin, l’utilisateur aura l’impression de voir une teinte de gris. C’est l’astuce utilisée pour le carré de « premium icons » sur la page IcoMoon.io (zoomez sur la page pour voir les rayures).
Il vaut mieux décomposer toutes les lignes afin d’avoir des formes pleines et utiliser l'outil pathfinder pour réunir les formes quand cela est possible.
Les zones « blanches » doivent être sur fond transparent.
Créer la police d’icône dans IcoMoon
Une fois tous les fichiers SVG exportés, il vous suffit d’importer tous vos fichiers SVG dans l'application IcoMoon et vous les verrez apparaître sous « Your Custom Icons ». Notez que vous pouvez également y importer une police d’icônes en SVG déjà créée.
IcoMoon propose 3 outils :
la flèche permet de sélectionner l’icône, pour qu’elle fasse partie de votre police finale
la poubelle retire une icône de la police
le crayon active le mode édition.
Attention, ne vous trompez pas lors de la sélection d'un outil, car si vous cliquez sur une icône en gardant sélectionnée la corbeille, vous allez la supprimer. L’outil d’édition est très utile puisqu’il vous permet à la fois de changer la taille, mais aussi de faire des rotations et symétries et déplacer l'icône pour la centrer dans le caractère de la police. Très pratique pour des petits ajustements.
Les réglages en bas de fenêtre permettent d’inclure en plus de la police, les versions PNG des icônes (pour les vieux navigateurs) mais également d’enregistrer la session au format JSON (apparemment cela ne fonctionne que sur Chrome). C’est très pratique si vous travaillez en collaboratif et qu’un de vos collègues veut ajouter des images au pack plus tard, il lui suffira de charger cette même session.
Le bouton « Font » exporte la police, une fois les icônes sélectionnées. Là encore plusieurs options sont possibles dans les préférences comme le choix du préfixe pour vos icônes, l’encodage Base64 ou encore la possibilité d'utiliser des ligatures et encoder la police sur plusieurs caractères au lieu d'un seul (un mot par exemple comme pour la police "Ligature Symbols"). L’option Font Metrics vous permet encore une fois d’ajuster vos icônes à la grille typographique générale du document. La page « Font Metrics » vous expliquera mieux que moi (en anglais) à quoi correspondent les paramètres. Par défaut les icônes utilisent une grille de 16 x 16 pixels mais il est possible de la changer.
Par défaut IconMoon utilise «