Comment ajouter des icônes personnalisées ?

Je souhaite personnaliser le menu de navigation avec des icônes pour chaque catégorie.

Seulement ce sont des icônes qui n''existent pas dans la librairie proposée.

Comment procéder svp, sachant que j'ai créé un profil sur Fontastic car je trouvais ça plus simple pour justement pouvoir ajouter des icônes réalisées par nos soins.

Merci beaucoup !!

Bonjour,

Pour les icones personnalisées, il y a deux manières :

1. Soit on utilise des fichiers images, et on va ensuite mettre l'url de ces fichiers dans le champs "icone" de chaque catégorie

2. Soit on utilise ce qu'on appelle une police d'icones (Icon Font). C'est une technique pour regrouper tous un tas d'icones (vectorielles) dans un seul fichier

Option 1 - fichier images

Pour cela vous devez avoir une url vers l'image en question. Soit elle déjà sur internet et vous utilisez l'url existante, soit vous l'uploadez via gogocarto dans "Contenus -> uploader des fichiers"

Notez que les formats à préférer sont le SVG ou le PNG. Mais les autres feront aussi l'affaire. Comme l'icone sera toujours affichée en petit, si vous utilisez des format non vectoriel (autre que SVG) réduisez la taille de l'image (par exemple 50px de large ça suffira)

L'image doit être carré (exemple 50px x 50px), et si c'est un svg, la couleur doit être en noir, avec que gogocarto puisse changer cette couleur à la volée en fonction de la couleur de la catégorie associée.

Une fois que vous avez l'url de l'image a utiliser, il suffit de la mette dans le champ icone de la catégorie

Option 2 - police d'icones

Pour construire cette police, il va falloir utiliser un outil externe. Par exemple https://fontello.com/ ou https://fontastic.me/

Vous allez pouvoir uploader tous un tas d'icones en format vectoriel, ou utiliser des banques d'icones déjà présentes sur ces sites. Une fois votre sélection d'icones prête, vous pourrez génerer une police qui les contiendra toutes.

Certains de ces sites externe vous fourniront directement une url à intégrer dans votre site pour charger la police. Vous pourrez alors mettre cette url dans "Personnalisation / Style couleurs" -> "Lien pour le CDN des icones"

Ensuite, quand on attribut une icone à une catégorie, on va utiliser l'identifiant fourni par le service externe. Généralement c'est quelque chose comme "icon-XXX". Par exemple sur fontastic on a la liste des icones avec leur identifiant (lass)

Voilà ce que ça donne sur gogocarto

Uploader vous même le fichier de police

Certains services, comme fontello, ne fournissent pas de lien CDN, vous devez donc uploader manullement vos fichiers sur gogocarto. 

Télécharger d'abords le contenus fournir par Fontello, cela sera probablement un fichier CSS appelé styles.css ou icon.css, ainsi que plusieurs fichiers de police, avec des extensions comme WOFF, TTF etc... Il va falloir uploader chacun de ces fichiers sur gogocarto (Contenus -> uploder des fichiers), mais attention il va falloir respecter l'arborescence. Si Fontello vous fournit les fichiers polices sont dans un répertoire "fonts", alors lors de l'upload, il faudra specifier ce répertoire. En revanche il ne faut pas changer le nom du fichier

Pareil pour le fichier CSS, si il est dans un dossier, alors mettez le nom du dossier lors de l'upload. Si le fichier CSS est à la racine, ne mettez rien dans le champ "répertoire d'upload"

Une fois que tout est uploadé, vous aurez quelque chose comme ça

Prenez alors l'url du fichier CSS, et mettez dans le code suivant

<link href="URL_DU_FICHIER_CSS?version=1" rel=stylesheet">

Et mettez ce code dans "Personnalisation -> Styles -> lien pour le CDN des icones"

Cela donne quelque chose comme

le ?version=1 sera à changer si vous mettez à jour les fichiers. Si vous ajoutez une icone sur Fontello, il va vous refournir un fichier CSS et des fichiers de police. Il va falloir TOUT réuploader (il suffit d'ouvrir le précédent upload et de changer le fichier), puis changer le numéro de version dans le "lien pour le CDN" afin de vider le cache

Voilà, bon courage !