Dans un souci de personnalisation des sites internet que nous développons, nous avons été amenés à chercher un outil permettant de créer des polices d’icônes à partir d’éléments SVG. Nous avons alors trouvé “IcoMoon”, un outil gratuit, en ligne, qui permet de créer ses propres polices d’icônes.
Qu’est-ce qu’une police d’icônes ?
Une police d’icônes (icon font en anglais) est une police de caractères au même titre qu’Arial ou Times New Roman, sauf que les lettres sont des icônes.
Les plus connues d’entre elles s’appellent FontAwesome, Captain Icon ou Typicons. Certaines sont gratuites, d’autres payantes.
Font Awesome, un exemple de police d'icônes
Pourquoi utiliser des polices d’icônes ?
Lorsque vous souhaitez ajouter des pictogrammes sur votre site internet, plusieurs solutions s’offrent à vous. Vous pouvez ajouter directement une image PNG pour la placer où vous voulez. Cependant, nous vous conseillons l’utilisation d’icon font.
Tout d’abord, les icon fonts présentent un temps de chargement bien plus rapide, à l’affichage, que les images. Ensuite, les icon fonts se comportement comme une police de caractères. Vous aurez la possibilité de lui donner une taille avec l’attribut CSS “font-size” ou une couleur (attribut css “color”). Un même pictogramme pourra donc avoir différents affichages selon les propriétés CSS qui lui ont été attribuées là où il faudrait plusieurs images png pour simuler le même comportement.
IcoMoon, pour créer ses propres polices d’icônes !
Si les nombreuses polices d’icônes présentent sur internet offrent un large panel de choix, il peut arriver que votre client vous demande de mettre en place de pictogrammes personnalisés. C’est là qu’IcoMoon est intéressant.
Tout d’abord, demandez à votre graphiste préféré de créer les icônes sur un logiciel de dessin vectoriel comme Illustrator. Puis, demandez-lui d’exporter ces icônes au format SVG (ou récupérez des icônes SVG sur un site comme https://www.flaticon.com/).
Les pictogrammes en SVG
Ensuite, rendez-vous sur IcoMoon et importez vos fichiers SVG (encadré bleu), sélectionnez les (encadré vert). Vous pouvez alors générer votre police et télécharger un fichier ZIP (encadré rouge) qui contient images SVG, sous forme de police.
Icon Moon, l'outil pour créer ses propres polices d'icônes
Maintenant que votre archive ZIP est téléchargée, vous n’avez plus qu’à inclure votre fichier style.css dans votre projet, placer le dossier fonts (qui contient vos icônes) dans l’arborescence de votre site et vous pouvez afficher votre icon avec le code <i class="icon-leNomDeVotreIcone"></i> ou <span class="icon-leNomDeVotreIcone"></span>. Les deux fonctionnent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Agency - Start Bootstrap Theme</title>
<!-- Bootstrap core CSS -->
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="css/agency.min.css" rel="stylesheet">
<link href="icomoon.css" rel="stylesheet" >
</head>
</head>
[....]
<!-- Services -->
<section id="services">
<div class="container">
<div class="row">
<div class="col-lg-12 text-center">
<h2 class="section-heading text-uppercase">Services</h2>
<h3 class="section-subheading text-muted">Lorem ipsum dolor sit amet consectetur.</h3>
</div>
</div>
<div class="row text-center">
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="icon-olentzero "></i>
</span>
<h4 class="service-heading">Premier icône</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<i class="icon-rugby"></i>
</span>
<h4 class="service-heading">Deuxième icône</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<span class="icon-surfing-a-sea-turtle"></span>
</span>
<h4 class="service-heading">Troisième icône</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
<div class="col-md-3">
<span class="fa-stack fa-4x">
<span class="icon-data"></span>
</span>
<h4 class="service-heading">Dernier icône</h4>
<p class="text-muted">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.</p>
</div>
</div>
</div>
</section>
Vos icônes sont maintenant disponibles sur votre site. Vous êtes alors libres de personnaliser la taille de votre pictogramme ou sa couleur pour qu'il s'adapte au mieux au design du site !
Nos icônes personnalisées
Introduction à notre Connecteur Looker StudioRedbox.fr, votre agence web à Biarritz, est fière de présenter son dernier accomplissement...
Lorsque vous exploitez un site e-commerce, l'une des clés du succès réside dans la création de fiches produits attrayantes...