How to add custom icons images to Squarespace 7.1 navigation

This tutorial will show you how to add custom icons to Squarespace 7.1 navigation. if you have not upgraded to version 7.1 yet then we suggest you do.

Complexity: Moderate

---

Step 1

First thing we need to do is upload your icons on to squarespace.

From the Squarespace dashboard navigate to:

Design > Custom CSS and at the bottom click on the 'MANAGE CUSTOM FILES' button and then click on the 'Add image or font' button to upload your icon images.

---

Step 2

The next step will be to add the basic styles for all the link for both desktop and mobile devices

/*BASIC STYLES FOR ALL LINKS*/
.header-nav-item a::before,
.header-menu-nav-item a::before {
  content: '';
  height:30px;
  width: 30px;
  background-size: contain !important;
  background-repeat: no-repeat !important;
  vertical-align: middle;
  margin-right: 5px;
  display: inline-block;
}

---

Step 3

Add code for specific link. To select only the specific link then we can use :nth-child.

.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item:nth-child(1) a::before {
  background: url('');
}

* change the number depending on which link you want to select 1, 2 ,3 etc.

---

Step 4

Assign icon to link.

To do this place your cursor in between ' ' in background: url (' '); line.

Then click the ‘MANAGE CUSTOM FILES’ to show the icons, lastly click on the icon to be assigned to the link once.

---

Step 5

Different icon for each link.

Repeat steps 3 and 4. below are the code for link 2 and link 3

.header-nav-item:nth-child(2) a::before,
.header-menu-nav-item:nth-child(2) a::before {
  background: url('');
}

.header-nav-item:nth-child(3) a::before,
.header-menu-nav-item:nth-child(3) a::before {
  background: url('');
}

---

If you have any questions or need any help with your Squarespace website design, you can book a 1:1 consultation.

---

All work in this guide is provided ?“AS IS”. Other than as provided this guide makes no other warranties, express or implied, and hereby disclaims all implied warranties, including any warranty of fitness for a particular purpose.

If you require professional advice, you can book our consultation services.