Guillaume Duverger - Développement & Graphisme - Blog

Comment utiliser une police d'icônes SVG

Cette police est composée de 300 icônes, regroupant des sujets divers et variés, d'où son nom : "Bric-à-brac". Celle-ci est libre de droits. Vous pouvez la télécharger gratuitement sur cette page, la modifier, la diffuser mais vous n'êtes pas autorisé à l'utiliser à des fins commerciales. Il s'agit de la deuxième version (V 2.1) :

V2.1 : Ajout de nouvelles icônes et suppression de certaines icônes.

Installation : méthode avec CSS

Vous venez juste de télécharger la police (en bas de page). Vous avez décompressé le dossier zip, récupéré le dossier dans lequel se trouve la police d'icônes, ouvert dans un éditeur de texte le fichier css (styles.css) où sont regroupées les class de chaque icône.

Il convient dans un premier temps de placer dans un fichier css (à part selon les cas) ou directement sur une page le code suivant :

@font-face {
font-family:"bric-a-brac";
src:url("votre_dossier/bric-a-brac.eot");
src:url("votre_dossier/bric-a-brac.eot?#iefix") format("embedded-opentype"),
url("votre_dossier/bric-a-brac.woff") format("woff"),
url("votre_dossier/bric-a-brac.ttf") format("truetype"),
url("votre_dossier/bric-a-brac.svg#bric-a-brac") format("svg");
font-weight:normal;
font-style:normal}

Il s'agit de la déclaration qui appelle la police via la règle@ CSS @font-face. Vérifiez bien l'emplacement du dossier si les icônes n'apparaissent pas.

Ensuite, il vous faudra ajouter ce code à la suite :

[class^="icone-"]:before,
[class*=" icone-"]:before {
font-family:"bric-a-brac" !important;
font-style:normal !important;
font-weight:normal !important;
font-variant:normal !important;
text-transform:none !important;
speak:none;
line-height:1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale}

On indique que toutes les class qui commencent par "icone-" font partie de la police. Autrement dit, si vous écrivez :

<i class=icone-info></i>

Vous obtenez cette icône :

Installation : méthode avec HTML

Au lieu d'utiliser des class, nous allons utiliser l'attribut HTML data- dans lequel nous plaçons un caractère qui correspond à une icône.

En placant ce code ci-dessous sur une page :

<div data-icon="..."></div>

Vous obtenez ceci (l'icône d'un appareil photo) :

💡 Vous pouvez retrouver les codes correspondant aux icônes dans le css fourni dans le fichier .zip lorsque vous aurez téléchargé la police.

Et avec du CSS, vous pouvez modifier l'apparence de l'icône :

La mise en place est identique à la méthode en CSS :

@font-face {

font-family: "bric-a-brac";
src: url("votre_dossier/bric-a-brac.eot");
src: url("votre_dossier/bric-a-brac.eot?#iefix") format("embedded-opentype"),
url("votre_dossier/bric-a-brac.woff") format("woff"),
url("votre_dossier/bric-a-brac.ttf") format("truetype"),
url("votre_dossier/bric-a-brac.svg#bric-a-brac") format("svg");
font-weight: normal;
font-style: normal

}

[data-icon]:before {

font-family: "bric-a-brac" !important;
content:attr(data-icon); /*on ajoute un attribut data pour la méthode HTML*/
font-style: normal !important;
font-weight: normal !important;
font-variant: normal !important;
text-transform:none !important;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale

}

Installation : méthode avec SVG sprite

Pour installer le sprite svg, il suffit de placer le fichier svg (présent dans le dossier zip à télécharger) regroupant toutes les icônes de la police sur le ftp de votre site.

Ensuite, vous devez faire le lien vers le fichier svg que vous avez mis sur votre ftp comme ceci :

<svg class="icone-agenda">
<use href="icons.svg#icone-agenda"></use>
</svg>

Ce qui donne :

Et pour finir, il faut ajouter ce code css :

svg[class^="icone-"],
svg[class*="icone-"]{
padding:10px;
height:128px;
width:128px;
display:inline-block;
fill:currentcolor;/*custom propriete currentcolor : prend la couleur de l'element parent.*/}

1. Le fichier zip à télécharger ci-dessous contient :
2. Un dossier contenant la police au format .eot, .svg, .ttf et .woff.
3. Un fichier svg regroupant les 300 icônes.
4. 300 icônes au format png et de taille 512 x 512px.

Polyfill :

Si vous souhaitez installer cette police avec la méthode SVG il vous faudra un polyfill pour la compatibilité avec Internet Explorer : svg4everybody🔗.

Astuce :

Pour éviter de charger inutilement des ressources supplémentaires, un bon moyen est de sélectionner les icônes utiles à votre projet.

Pour ce faire, rendez-vous sur icomoon🔗. Vous cliquez ensuite sur "Import Icons". Vous sélectionnez le fichier "bric-a-brac.svg" (que vous venez de télécharger sur cette page bien entendu). Toutes les icônes de la police vont apparaître.

Puis, vous procédez à votre sélection comme sur le visuel ci-dessous :

Ceci fait, il ne vous reste plus qu'à éditer cette sélection et générer ainsi une police sur-mesure pour votre site.

(icônes créées avec Inkscape. Font générée sur Fontastic)