Konfigurieren der Tab-Leisten-Symbole in der MemberPress-App

Tab Bar icons provide primary navigation within mobile applications. Icon customization enhances visual consistency and brand alignment. This document explains how to customize Tab Bar icons, apply display styles, and preview icon changes within the app.

Understanding Tab Bar Icon Configuration

Tab Bar icons display at the bottom of mobile screens for quick navigation access. The icon pack provides multiple style options, including filled, outline, circular, and square variations. Legacy icons remain available for familiar appearance preferences. Icon customization affects both visual appearance and member navigation experience.

Understanding Tab Bar Structure

Tab Bar structure limits the number of directly accessible navigation items.

A maximum of four items can be displayed in the main Tab Bar. The fifth position is automatically reserved for the More Menu.

More Menu overflow contains additional navigation items beyond the four Tab Bar slots. Members tap the More icon to access overflow navigation.

Icon consistency improves navigation clarity. Use similar icon styles across all Tab Bar items for a cohesive appearance.

Accessing Tab Bar Settings

Tab Bar icon configuration occurs within the menu settings interface.

1. Navigieren Sie zu Dashboard > MP App > Menus.
   
2. Suchen Sie die Tab Bar Menu Abschnitt.
   
3. Verify navigation items are added to the Tab Bar menu.

Customizing Tab Bar Menu Item Icons

Each Tab Bar menu item supports individual icon customization.

1. Navigieren Sie zu Dashboard > MP App > Menus.
   
2. Locate the Tab Bar menu item requiring icon customization.
   
3. Click the dropdown arrow next to the menu item name.

4. Finden Sie die Item Icon section in the expanded settings.
   
5. Click the icon box to open the Icon Selection Panel.

6. Locate an icon representing the menu item function and select it.

Configuring Icon Display Styles

Display styles control icon appearance and visual emphasis.

Setting Icon Style

1. Suchen Sie die Icon Style dropdown in the Icon Selection Panel.

2. Select the desired style:
   • Filled for solid icon shapes;
   • Outline for line-based icon shapes.

3. Review the icon preview with the selected style.

Filled styles provide stronger visual weight for active states. Outline styles offer a lighter appearance for inactive states.

Setting Box Style

1. Suchen Sie die Box Style dropdown in the Icon Selection Panel.

2. Select the desired style:
   • Circular for round icon backgrounds;
   • Quadratisch for rectangular icon backgrounds;
   • Keine for icons without background shapes.

3. Review the icon preview with the selected box style.

Box styles add visual containers around icons. Background shapes improve tap target size and visual consistency.

Setting Icon Color

1. Suchen Sie die Icon Color picker in the Icon Selection Panel.

2. Select whether to use the default or custom color style.

Icon colors should maintain sufficient contrast against Tab Bar backgrounds for visibility.

Using Legacy Icon Pack

Legacy icons provide a familiar appearance for apps using previous icon designs.

1. Navigieren Sie zu Dashboard > MP App > Menus.
   
2. Open the menu item dropdown.

3. Klicken Sie auf die Erbe tab.

4. Select an icon from the classic icon set.
   
5. Klicken Sie auf die Select Icon to confirm selection.
   
6. Klicken Sie auf die Menü speichern um die Änderungen anzuwenden.

Legacy and updated icons can be mixed within the same Tab Bar menu. Consistent style selection improves visual cohesion.