Webflow sync, pageviews & more.
NEW

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> (replace fa-circle with 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.

Webflow Resources
Webflow templates
Webflow inspiration
Rate this answer

Other Webflow Questions

Explore Logic tutorials
Does Webflow support YouTube Shorts for the Video Link in the CMS, as it is not working for me?
How can I fix the issue with the navbar losing its position on mobile devices running Android Chrome in Webflow?
How can I send form data and submissions from Webflow to a new row in a Google Sheets spreadsheet document securely and for free?
In Webflow, is there a way to maintain transparency in Lottie files while using the Bodymovin plug-in?
How to duplicate a CMS collection on the same website in Webflow?
How can I improve the load time of my website on Webflow?
What is the code to cancel the default form handling in Webflow and replace it with custom actions?
Is it possible to edit the color of an SVG pictogram directly in Webflow and can the color also be changed using animations?
How do I rename text span blocks in the Webflow panel?
How can I create a dropdown that pushes other elements down the page like the one shown in this Webflow gif?
What are some Webflow-friendly alternatives to Stripe that support crypto payments, customizable checkout carts, acceptance of Swiss Francs, and the implementation of a subscription feature?
How can I create a mobile-friendly image carousel in Webflow where the images overflow the container and the user can swipe left and right to see the entire image?
How can Webflow users set up paginated collections using the jquery-pjax library to create a smoother browsing experience?
What is a solution to schedule a daily task in Webflow to run a script and avoid CORS blocks in the console?
Can I use a custom-designed cart page in Webflow with a Shopify checkout like the Alyx website?
Can Webflow be used to call a CSS or JS file stored on a different server, instead of hosting them on GitHub?
How can I use the Finsweet script to manage two different sliders on my Webflow page, each feeding content from different collections?
How can I prevent a full-screen slider in Webflow from pausing on hover? Additionally, I would like to link two sliders to one control or navigation. Can anyone with JavaScript knowledge help me achieve this?
How can I fix the issue with the scroll not being smooth on my mobile device (iPhone + Safari) in Webflow?
How can I prevent scroll when my nav is open in Webflow using code? The scroll is disabled correctly when I change the class name of the second 'menu', but it does not get activated when the menu is closed. It doesn't work at all if both class names are the same. Can anyone provide assistance with this issue?
How can I add date filtering to my current list of filters in Webflow using Finsweet CMS Filtering?
How can I change the language of publication dates in Webflow CMS collection from English to Portuguese?
How can I configure Webflow forms to exclude empty or unchecked checkboxes when sending emails? Additionally, is it possible to customize the email text for checked checkboxes, such as using "réservé" instead of "true"?
How can I dynamically redirect to a CMS created after form submission in Webflow?
How can I make the menu close when a link is clicked in Webflow?
How can I hide the "no items found" empty field in Webflow for a second multi-image gallery on certain pages?
How can I implement swipe functionality between tab panes on mobile using custom code in Webflow?
How can I disable right-clicking on images to prevent downloading on my Webflow portfolio website?
Is there a way to fix the issue of values from Textareas with multiple lines not getting parsed correctly in Webflow Logic when posting to an external API?
In Webflow, how can I hide specific elements in the footer (such as "Ramin Khaze The Difference" and "Schedule showing") when the URL contains a certain parameter, such as "?mls"? I am a beginner in coding and would appreciate any help. Thank you!