Jump to content

Add Custom Icons to Navigation Links

Recommended Posts

Hi! Putting this in a separate thread. I'd also like to learn how to add custom icons to navigation links. Similar to this site's tutorial - https://www.beatrizcaraballo.com/blog/navigation-links-icons

I added the code in section 5 to my site, making adjustments as needed - changing the name of the navigation links to what I have, and adding my custom icon urls. But the images didn't populate. 

I do have anchor links already set up - is this why it won't work? 

This is the exact code I'm using, just left out the links for the icons

.Header-nav--primary .Header-nav-item:nth-child(1)::before {
  content: '';
  height: 30px;
  width: 30px;
  display: inline-block;
  background: red;
  vertical-align: middle;

a#site-title, div.header-nav-item *, div.header-menu-nav-item * {
    font-family: 'fugue' !important;

.Header-nav--primary .Header-nav-item::before,
.Mobile-overlay-nav--primary .Mobile-overlay-nav-item::before {
  content: '';
  height: 40px;
  width: 40px;
  display: inline-block;
  background-size: contain;
  background-repeat: no-repeat;
  vertical-align: middle;
  margin-right: 5px;

/*Clients LINK*/
.Header-nav--primary .Header-nav-item[href="/Clients"]::before,
.Mobile-overlay-nav--primary .Mobile-overlay-nav-item[href="/Clients"]::before {
  background-image: url(' ');

/*Inquire LINK*/
.Header-nav--primary .Header-nav-item[href="/Inquire"]::before,
.Mobile-overlay-nav--primary .Mobile-overlay-nav-item[href="/Inquire"]::before {
  background-image: url(' ');

Link to comment
  • Replies 1
  • Views 782
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.