Comment personnaliser les icônes du menu de votre app ?

Bonjour et bienvenue dans votre back office GoodBarber.

Aujourd'hui nous allons apprendre à modifier les icônes de votre mode de navigation.

Si vous n'avez pas encore choisi votre mode de navigation vous pouvez aller voir la vidéo dédiée que je vous met dans la barre d'info.

Le tuto d'aujourd'hui vous concerne si vous avez choisi les modes de navigation Swipe, Little Swipe, TabBar ou Grid.

Dans ces modes de navigations, les sections de votre boutiques sont représentées par des icônes que vous pouvez personnaliser.

Je vous montre comment.

Rendez vous dans le menu My app > Design > Menu de Navigation.

Entrez dans le mode de navigation que vous avez choisi. Swipe pour moi.

Dans le swipe, les icones ne sont pas obligatoires mais vous pouvez les activer ici.

Menu settings. Voilà il suffit d'activer l'option.

Maintenant je retourne dans le menu Layout.

Pour changer l'icone d'une section il suffit que je clique sur la section, puis sur Edit the icon.

Maintenant j'ai deux possibilités. Soit je choisis parmi les 150 icones proposées par GoodBarber.

Soit je télécharge une icône personnalisée.

Pour ca, je rentre dans le menu Icones Perso.

Si vous choisissez l'option icone, vous devrez forcémment télécharger une image de couleur Blanche sur fond transparent, car vous pourrez appliquer les couleurs de votre thème à cette icone.

Dans mon cas, je vais choisir dans la bibliothèque d'icones GoodBarber.

Voilà parfait.

Je modifie les icones des autres sections rapidement.

Et c'est fini !

Pour modifier la couleur des icones, je vais dans le menu Settings. Icons color. et voilà.

Dernière option.

Vous pouvez mettre une section en avant dans votre menu et donc appliquer une couleur différente à son icone.

Pour ca, dans le menu Layout, on choisit la section qu'on veut mettre en avant et on active l'option "Feature this link".

Voilà maintenant j'ai plein de nouvelles options.

Je n'ai plus qu'à sélectionner les couleurs de mon icone.

C'est fait !

Voilà le résultat final !

Vous savez maintenant comment personnaliser les icones de votre mode de navigation !

A bientôt pour un nouveau tutoriel ;)