How can I add icons to my navigation menu items?

Katerina_Red
Excursionist
22 1 4

Hi!

 

I would like to add an icon before each menu item. Not in the dropdown, just the main categories of navigation.

My theme is Sense version 13.0.1

https://naturalhellenia.com/

 

Thank you!

Replies 3 (3)

sahilsharma9515
Shopify Partner
1031 128 193

Hi @Katerina_Red if your theme doesn't have this option by default then this can only be achieved with the help of custom coding. I can provide you the base code through which you can achieve this, but you need to update the code according to your theme code files.

 

<ul class="main-menu">
  <li class="menu-item">
    <i class="menu-icon fas fa-home"></i>
    <a href="/">Home</a>
  </li>
  <li class="menu-item">
    <i class="menu-icon fas fa-user"></i>
    <a href="/account">Account</a>
  </li>
  <!-- Add more menu items with icons as needed -->
</ul>

 

.menu-icon {
  margin-right: 5px; /* Adjust spacing between icon and text */
}

/* Example using Font Awesome */
.menu-icon::before {
  font-family: 'Font Awesome 5 Free';
  content: '\f015'; /* Unicode for the home icon */
  /* Adjust size, color, etc. */
}

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️


Katerina_Red
Excursionist
22 1 4

Hi!

 

I'm not sure where to edit the code

 

<ul class="main-menu">
  <li class="menu-item">
    <i class="menu-icon fas fa-home"></i>
    <a href="/">Home</a>
  </li>
  <li class="menu-item">
    <i class="menu-icon fas fa-user"></i>
    <a href="/account">Account</a>
  </li>
  <!-- Add more menu items with icons as needed -->
</ul>
sahilsharma9515
Shopify Partner
1031 128 193

Hi @Katerina_Red As mentioned earlier, this is just a base code to accomplish the task that you have mentioned, you need to look into your theme code files, and update the base code according to your theme, you may find the code in header.liquid file.

 

If you will unable to implement the same then I'm happy to do this for you, let me know. I can implement the changes so that this will work well for you.

 

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

 

Best Regards

Sahil

 

- Your

 Coffee Tip 

can create magic in coding ❤️❤️

- Need a Shopify Developer? CHAT ON WHATSAPP or EMAIL ME !


- Hopefully the solution will help you. If yes then Please hit

 Like 

and

 Mark it as solution! ❤️