How can I add little white or teal icons to my website's menu bar in Webflow to separate the menu items?
TL;DR
- Use an image icon: Upload your icon, place an image block between menu items, and adjust size/margins.
- Use Font Awesome: Embed Font Awesome, add a text block, insert an icon (
<i class="fas fa-circle"></i>), and style it. - Use Unicode symbols: Add a text block and insert symbols like • or |, then adjust spacing and color.
You can add small white or teal icons between menu items in Webflow by using custom images or Font Awesome icons. Here’s how to do it:
1. Use an Image or SVG Icon
- Upload Your Icon: Go to Assets Panel and upload a small white or teal icon (e.g., an SVG or PNG).
- Place the Icon in the Menu:
- Open Navigator, locate your navigation menu.
- Drag an Image Block between menu items and select the uploaded icon.
- Adjust Sizing & Spacing:
- Set a consistent width/height (e.g., 16x16px).
- Use Margins to adjust spacing between links.
2. Use Font Awesome or Unicode Symbols
- Add a Text Block: In Navigator, place a Text Block between menu links.
- Use Font Awesome (optional):
- Add Font Awesome to your project by embedding this in Custom Code (inside
<head>under Project Settings):<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css"> - Inside your Text Block, type:
<i class="fas fa-circle"></i>(replacefa-circlewith other icons). - Use Unicode Symbols:
- Instead of an image or icon, you can use characters like • or | by typing them directly in the Text Block.
- Style & Position:
- Set the font size and color to white or teal.
- Adjust margin/padding to position it properly between menu items.
Summary
You can add small icons to your Webflow menu using image uploads, Font Awesome, or Unicode symbols. Adjust spacing and colors to match your design.