Adding Icons to Navigation Links

There are a few ways to go about this and below I’ll be walking through each of them.

squarespace-icon-thumb.gif
 

Option 1

Use an Emoji or
HTML symbol

1. Find your Emoji

2. Add the Emoji/Symbol to your Navigation Item

  1. Click the ⚙Settings Gear next to the page or link you want to add the emoji/symbol to.

  2. In the Navigation and Page Title, add the emoji/symbol where you want it to display.

  3. Shazam! You’re all set.

  4. Make sure to check Mobile to see what it looks like.

    Tip: On ilovecreatives, I use emojis to show when something is ⚡️ new.

 

Option 2

Use an Icon

I’m a big fan of The Noun Project, but you can use any image. Even a GIF! For this example, I’ll walk-through how to add this Noun Project icon into the Primary Navigation with the Brine Template.

1. Prep your Icon

  1. First, you’ll need to download the PNG. I’m using this Gecko. Please be sure to attribute the creator of this icon. If not, pay $1.99 for a royalty-free license. Click Get this icon > Basic Download > Download PNG.

  2. You can crop out the attribution in Photoshop or leave it as is. For this example, I’m going to leave it as is… because I’m lazy.

  3. Head to your Squarespace Site > Website > Website Tools > Custom CSS > Custom Files.

  4. Drag your file to the Add Images or Fonts section.

 

2. Custom CSS

  1. Make sure that you have at least two nav items in your Primary Navigation. I have three: Home, Shop, and 🔥Blog. For this example, we will be adding custom code to the 2nd Primary Navigation Item: Shop.

  2. Copy and paste the Custom CSS

/* DESKTOP */
.header-nav-item:nth-child(2) {
  background-image: url(''); /* Add the URL from Squarespace */
  background-repeat: no-repeat;
  background-size: 26px 26px; /* Size of the icon */
  background-position: 0px 0px;
  padding-left: 30px !important; /* Moves the icon to the left */
}

/* MOBILE */
.header-menu-nav-item a {
  width: max-content;
  padding-left: 30px;
}

.header-menu-nav-item:nth-child(2) a {
  background-image: url(''); /* Add the URL from Squarespace */
  background-repeat: no-repeat;
  background-size: 26px 26px;
  background-position: 0px 0px;
  padding-left: 30px;
}

You might have noticed that I added !important to padding-left. That’s because Squarespace has some padding already added by default and I needed to override it.

 

3. Add your Image URL

  1. Add your cursor between the apostrophes in background-image: url(' ');

  2. Open Manage Custom Files and click the icon once.

  3. You should see your icon! If not, check if you added the URL path twice.

 

4. Tweak Your CSS

When tweaking CSS, I reference W3schools.com to look up what all the CSS property options there are.

  1. For your icon, you’ll need to tweak the background-size. The Noun Project Icon was 700 x 700 pixels so any 1:1 ratio of that would work. If your image is a different size, use this calculator (or Photoshop) to determine the new size. For this example, I’m going to use 26px 26px.

  2. You can leave background-position as is for now, but in the future, this is also a property you can tweak.

  3. Since this icon will be on the left of the text, I’ll add padding-left.

 

FAQ

What if I don’t see my icon?

Double check that your URL for the icon is correct. When you copy CSS from the Developer Tools, the URL is truncated automatically. The best way to find out is to open the URL in a new window and see if your image shows up.

 

What if I want the icon to be on the first nav item?

The :nth-child(n) selector matches every element that is the nth child, regardless of type, of its parent. If you want to select the first nav item change 2 to 1.

 

What if you want to add the icon to the right?

Replace background-position and padding-left with this CSS:

    background-position: 46px 0px;     padding-right: 30px !important;
 

How can I change the icon opacity on hover?

You can tweak how the navigation acts on hover in Site Styles. For this example, I am using Spotlight.
Add this to Custom CSS:

/* DESKTOP */
.header-nav-item:nth-child(2):hover {
  opacity: 0.4;
}

/* MOBILE */
.header-menu-nav-item:nth-child(2):hover a {
  opacity: 0.;
}
 

What if I only want to see the icon, not the text?

This is a little hack, but you can make the color of the text transparent. If the Navigation Title is super long, you’ll need to change the background-position. Try to keep it short! 

color: transparent !important;
background-position: 8px 0px; /* Depends on how long the word is. */
Code SnippetsPunoSection 3 - Custom Sites