Comment transformer vos icônes en une police Web
J'avais créé de belles icônes pour une refonte de site Web que je faisais, et j'ai prévisualisé le nouveau site sur un ancien iPad. La mise en page semblait correcte à la taille normale, mais en zoomant sur une partie de la page, j'ai soudainement vu que mon icône était floue, alors que l'en-tête textuel était toujours net. Sur un nouvel iPad à affichage Retina, les icônes ne semblaient pas très nettes, même à une taille normale.
La première idée que j'avais était de créer des images de sprite de taille double, en les configurant pour afficher la moitié de leur taille en utilisant CSS. Bien que cela les rende plus beaux sur un écran Retina de taille normale, dès que vous commencez à pincer et à zoomer, le flou revient. Mais le texte était toujours aussi net et net.
La réponse était évidente. J'avais besoin de transformer mes icônes en police.
Dans ce tutoriel, nous allons voir comment transformer les icônes vectorielles en une police Web en utilisant une application Web gratuite appelée IcoMoon. Ensuite, nous allons voir comment utiliser les fichiers de polices et CSS générés dans une page Web.
Les avantages d'utiliser une police d'icône
Une police d'icône présente plusieurs avantages par rapport aux images bitmap, en plus de la netteté de l'image.
- Adéquation: la taille de la police d'une icône est beaucoup plus petite qu'une série d'images, surtout si vous avez utilisé des images de taille double pour les écrans Retina. Et une fois la police chargée, vos icônes seront rendues instantanément, sans devoir télécharger une image.
- Évolutivité: une police d’icône peut être définie sur n’importe quelle taille en
font-sizepropriété dans le CSS d'accompagnement. Cela vous permet d'expérimenter avec différentes tailles; alors que pour les images bitmap, vous devez produire un fichier image à chaque taille. - Flexibilité: les effets de texte peuvent facilement être appliqués à votre icône, y compris les couleurs, les ombres portées et les états de survol. Ils s'afficheront également bien sur n'importe quel fond de couleur ou d'image.
- Compatibilité: les polices Web sont prises en charge par tous les navigateurs modernes et les navigateurs existants, même IE 6 et les versions antérieures.
Alors, commençons!
Création d'une police d'icône
Les polices de symboles peuvent être créées à l'aide d'une application de création de polices dédiée telle que Glyphes , mais un outil de typographie professionnel est bien au-delà des besoins ou des exigences de la création d'une police d'icônes simple, dans laquelle la relation entre les caractères (crénage et ligatures) n'est pas importante.
Le moyen le plus simple est d'utiliser une application en ligne gratuite appelée IcoMoon , par Keyamoon, qui élimine les problèmes liés à la conversion de symboles en une police Web.
Cette application HTML5 élimine toute la douleur liée à la création de fichiers de polices pour des utilisations simples telles que la création de polices d’icône. IcoMoon est livré avec un certain nombre de jeux d'icônes déjà chargés et vous pouvez en ajouter d'autres à la bibliothèque, dont la plupart peuvent être utilisés gratuitement (vérifiez les licences). Si vous recherchez des icônes assez standard, telles que "téléchargement de fichier" et "panier d'achat", vous constaterez peut-être qu'il est préférable d'utiliser l'une de ces options plutôt que de créer la vôtre.
Pas à pas
1. Préparez vos illustrations
Pour commencer, vous devez créer les icônes dans un programme de dessin vectoriel capable d'exporter au format SVG, tel qu'Illustrator ou Inkscape.
Pendant que vous concevez, vous pouvez travailler avec les couleurs de votre choix, mais les icônes doivent être une couleur unie. Assurez-vous que chaque icône a approximativement la même taille. Avoir une icône beaucoup plus grande ou plus longue rendra difficile la création d’une police cohérente. Ici, j'ai dû réduire la largeur de mon icône de dirigeable pour qu'elle corresponde aux autres.
2. Nettoyer
Vérifiez soigneusement chaque icône pour vous assurer qu’elle n’a pas d’imperfections - les détails qui semblent corrects à des tailles plus petites peuvent masquer de petits défauts lors d’un zoom avant. Dans l’icône ci-dessous, je dois supprimer les étapes irrégulières qui s’y sont introduites.
Dans Illustrator, utilisez l'outil Pathfinder pour unifier les éléments qui se chevauchent et l'élément Minus Front pour supprimer les éléments découpés, tels que l'étoile dans ces icônes.
Le principe clé est de s'assurer que votre icône est lisible à petite échelle. Simplifiez autant que possible.
3. Exporter en SVG
Maintenant, sélectionnez une icône, copiez-la et collez-la dans un nouveau document carré (par exemple, 200 × 200 pixels). Mettez à l'échelle l'icône pour qu'elle corresponde. Vous pouvez trouver utile de définir une règle de base. Colorez l'icône afin qu'il soit noir sur fond blanc.
Maintenant, choisissez File… Save as et enregistrez le fichier en tant que fichier SVG. Utilisez les paramètres SVG par défaut. Une fois que vous avez fait cela pour toutes les icônes, vous êtes prêt à créer une police Web.
4. Importer dans IcoMoon
Ouvrez le Application web IcoMoon . Pour importer une icône, cliquez sur le bouton "Importer des icônes", puis sélectionnez les fichiers SVG que vous souhaitez ajouter - vous pouvez ajouter plusieurs fichiers à la fois. Celles-ci apparaîtront alors sous «Vos icônes personnalisées». Si elles sont surlignées en jaune, elles feront partie de la police d’icône que vous créerez. Dans cet exemple, vous pouvez voir que j'ai décidé de ne pas exporter l'une de mes icônes, et j'ai ajouté l'une des icônes des "Mini-icônes".
5. Exporter les polices depuis IcoMoon
Vous pouvez cliquer sur le bouton "Modifier" si vous souhaitez ajuster la position, le dimensionnement ou la rotation de l'icône. Utilisez le bouton "Enregistrer la copie" pour créer des variations d'icône (par exemple, une image miroir d'une icône). Ajoutez une balise significative à l'icône, car elle sera utilisée pour générer le nom de la classe.
Lorsque vous êtes prêt, cliquez sur le bouton "Police" en bas de l'écran pour commencer à générer la police. C'est ici que vous pouvez assigner quelle icône est mappée sur quel personnage; Par exemple, si votre jeu d'icônes est composé de six images d'une balle en rotation, vous pouvez affecter les caractères q, w, e, r, t et y aux six images. Dans les préférences, choisissez un nom de police. Vous pouvez également ajuster les métriques de la police, mais à moins que vous ne définissiez votre police personnalisée à côté du texte standard, vous n'avez pas vraiment besoin de vous en préoccuper.
6. Téléchargez les fichiers de police
Cliquez sur "Télécharger" pour télécharger le pack de polices sur votre ordinateur. Ce sera un sous-dossier contenant les polices elles-mêmes (aux formats WOFF, EOT et TTF), ainsi qu’un exemple de page HTML et le CSS correspondant. Il existe même un fichier JavaScript avec une solution de contournement si vous devez prendre en charge IE 6 ou 7.
Pour ajouter les polices à votre projet, copiez le sous-dossier des polices sur votre site. Vous pouvez copier et coller le CSS de style.css dans le fichier CSS de votre propre site, mais mon approche consiste à le renommer en fonts.css et à le conserver en tant que fichier CSS distinct. Vous devez ensuite ajouter une référence à ce fichier CSS dans votre fichier HTML en utilisant le lien correspondant:
<link rel="stylesheet" href="fonts.css" />Dans l'élément @ font-face du fichier CSS, vous devez remplacer la référence URL par le nouvel emplacement relatif des polices ou simplement déposer le dossier des polices dans votre dossier de feuilles de style.
7. Appel de la police
Comme vous pouvez le voir dans l'exemple de fichier index.html , il existe deux manières de référencer la police personnalisée, soit par son caractère (unicode ou nom), soit par son nom de classe. Le premier exemple utilise la condition HTML5 data-icon
<div aria-hidden="true" data-icon="g"></div>Ici, la classe fs1 est utilisée pour définir la taille de la police. La référence aria-hidden permet de garantir que le caractère n'est pas parlé par aucun lecteur d'écran.
La seconde méthode utilise un élément span:
<span aria-hidden="true"></span>Cette méthode est utile lorsque vous souhaitez que le symbole soit aligné avec le texte normal.
Si vous voulez que l’icône devienne un lien, vous pouvez l’emballer dans un href :
8. idées avancées
Comme nous venons de le découvrir avec l’état de survol, il est aussi facile de modifier la couleur de l’icône que de définir la propriété de couleur dans notre CSS. Vous pouvez également définir d'autres propriétés, telles que l'ombre et la transparence du texte, tout en conservant l'indépendance de résolution d'une police.
Essayez-le et je vous garantis que vous n'utiliserez plus jamais les icônes bitmap.
Avez-vous essayé d'utiliser des polices pour les icônes? Comment l'avez-vous trouvé? Faites le nous savoir dans les commentaires.