This tutorial explains how to add an Icon component in TopBuddy to make your notification bar more visible and scannable.
What You Will Learn
- How to add the Icon component.
- How to choose an icon from the built-in icon set.
- How to configure icon link, size, and colors.
Prerequisites
- TopBuddy active on your WordPress site.
- Access to a notification bar editor.
Step 1: Open the Bar Editor
Go to Settings > TopBuddy, then edit a notification bar.
Step 2: Configure the Icon Component
Select Icon in the Components area to open its settings panel.
Content Settings
- Select Icon: choose one of Check, Megaphone, Truck, Star, or Bell.
- Icon Link URL: optional link for the icon.
- Open link in new tab: optional for external destinations.
Style Settings
- Size: Small, Medium, Large, or Extra Large.
- Icon Color and Icon Hover Color.
Step 3: Save and Test
Save your changes and view a page where the bar appears. Confirm the icon size and color match your design.
Next Steps
- Pair icons with a short Message component for clearer announcements.
- Use consistent icon meaning across all bars for better UX.