Adding Icons to Navigation Bar

Hi, just wondering if it's possible to add icons to the navigation bar? Instead of typing out "Locations," I just want to include a globe icon. I tried some HTML code from fontawesome but it unfortunately did not work. Thank you!

Try this method or plugin:

https://www.primitusconsultancy.co.uk/blog/how-to-add-custom-icons-images-to-squarespace-71-navigation#:~:text=From the Squarespace dashboard navigate,to upload your icon images.

https://www.ghostplugins.com/products/p/easy-header-navigation-icons

Thanks Ziggy! Is there a way to just include an icon and no text for one of the navigation links? Or just make the text invisible?

Yes, if you get the icons added and share your website with me, I can give you some additional code to hide the text.

Thanks Ziggy! I just messaged you the link and password

Are you replacing all of the navigation links? Or just Location?

That worked perfect Ziggy, thank you!!

Hey Ziggy, do you know how I can find the specific codes below so I can do it for other pages as well? 

href="/203481164481

11 hours ago, gkg783 said:

/203481164481

This is the link URL slug. You can see this in the page settings.

E.g. your About Us page is /about Newsroom is /news

It's generally better to target the actual link rather than by number so it allows you to rearrange the links without adjusting the code.

Thank you Ziggy! Truly appreciate all the help

6 minutes ago, gkg783 said:

Thank you Ziggy! Truly appreciate all the help

Glad to!

Hi @Ziggy

Thanks a lot for helping on this topic.
I was able to assign an icon to the first menu-bar item but I would love to get rid of the "Home" button text - it should completely be replaced with the icon.
Any idea how to do this?

This is the current code:

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  height:20px;
  width: 20px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  vertical-align: middle;
  margin-right: -30px;
  display: inline-block;
}
.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('https://static1.squarespace.com/static/66fc4d6fcad21575f2f172a5/t/66ffcd425f8b2f65fda9d7fd/1728040258793/gipfeli_icon.png');
}