How to customize the icons of your menu

Hello and welcome to your GoodBarber back office.


Today we’ll learn how to change the icons of your navigation mode.

If you have not yet chosen your navigation mode you can go and see the dedicated video that I put in the info bar.


Today's tutorial is for you if you’ve chosen the Swipe, Little Swipe, TabBar or Grid navigation modes.

In these navigation modes, the sections of your app are represented by icons that you can customize.


I'll show you how.


Go to the My app > Design > Navigation menu.

Enter the navigation mode you have chosen. Swipe for me.

In the swipe, the icons are not mandatory but you can activate them here.

Menu settings. That's it, just activate the option.


Now I go back to the Layout menu.

To change the icon of a section I just have to click on the section, then on Edit the icon.

Now I have two possibilities.

 Either I choose among the 150 icons proposed by GoodBarber.

Or I upload a custom icon.

To do that, I go to the Custom Icons menu.

If you choose the icon option, you will have to upload a white image on a transparent background, because you can apply the colors of your theme to this icon.

In my case, I will choose from the GoodBarber icon library.

This is perfect.

I change the icons of the other sections quickly.

And that's it! 

To change the color of the icons, I go to the Settings menu. Icons color. and that's it.


Last option.

You can put a section forward in your menu and thus apply a different color to its icon.

To do this, in the Layout menu, choose the section you want to highlight and activate the option "Feature this link".

Now I have a lot of new options. 

I just have to select the colors of my icon.

It's done ! 

Here is the final result ! 


Now you know how to customize your navigation icons !

See you soon for a new tutorial ;)




Related videos