GoodBarber's Online Help
Customize the icons of your navigation menu
When setting your navigation menu , you can choose to display icons.
Those icons can be displayed in your shortcuts, or in the main navigation depending on the template you chose.
To set your navigation menu:
1. Click "Menu " from the right panel from the menu Design & structure > Structure > Sections
2. Click the icon you wish to change, the block will unfold
3. Click "Edit the icon":
You have multiple choices at this point:
- Choose from the1500 default icons provided by GoodBarber in the Collections tab.
or
- Import your own icon/image in the back office from the Personal icons tab.
Default icons collections
Different set of icons are available from our collection's tab:
-Generic Set #1: transparent background and full white logo.
-Generic Set #2: transparent background, just with logo borders.
Generic sets #1 and #2, there are ordered by theme: basic, event, weather etc.
-Generic Set #3: mix of logos for different type of page
1. Set the preview size* (16/32/64) of the icons to have a better display.
2. Select the icon of your choice, it will automatically replace the previous icon.
*It only changes the display in the preview, it doesn't change the actual size of the icon in the app.
Personal icons
1. Click "Personal Icon" tab
2. Select "Icon"
3. Click "Browse" to upload your own icon to the right format*
*Colors and textures chosen for the design of your app will be applied only if your icons conform to the following requirements:
- .png
- 260 x 260 pixels
- Fully white (#FFFFFF) image - and no other color, even for a pixel!!!! -
- Transparent background
The list of icons you have uploaded will show below, in the Personal collection area.
Personal images
The Image option allows to upload colorful images.
1. Click "Personal Icon" tab
2. Select "Image"
3. Click "Browse" to upload your own icon to the right format*
*for the icon to be displayed in accordance with your design settings, you must respect the following conditions:
-Format : PNG
-Dimensions : 260px x 260px
The list of images you have uploaded will show below, in the Personal collection area.
Video tutorial
Note: Menus have changed in the back office, but the behavior explained in the video is still accurate.