Tutorials
Back

How to customize the icons of the menu


Hello and welcome to your GoodBarber back office.

Today we’re going to learn how to change the icons in your navigation menu.

If you still haven’t selected your navigation template, you can watch the video I've added in the info bar.

If you have selected the, swipe, Little Swipe, TabBar or Grid navigation, then this tutorial is for you.
In these navigation modes, your sections of your app are represented by customizable icons.

Let me show you how.

Go to the menu My App> Design, navigation menu

Open the navigation mode you’ve selected, for me Swipe
With the Swipe, icons are not mandatory but you can activate them here : setting menu, see you only need to activate the option.
Now let’s go back to the Layout menu:
Click on the icon of the section you want to customize, then edit the icon. 

I have now 2 possibilities/: or I use 1 of the 150 icons offered by Goodbarber

Or I upload a custom icon

To do that I go to the menu Personal icons

If you select the Icon option, you must upload a white image on transparent background, as you will be able to apply your theme colors to this icon.

In my case, I will choose from the GoodBArber icon library
voila!

I quickly change the icons of the other sections. All done!
To change the color of the icons, go to the settings menu, icon color and voila!

You can highlight a section in your menu by using a different color for the icon.To do that go to the layout menu, select the section you want to highlight and activate the option “feature this link” . you have now many more options. All you need is to select the colors of your icon. All done!

See the final result.
You now know how to customize the icons on your navigation menu.
See you very soon for another tutorial 
 

Related videos