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

Complexity: Moderate

Step 1

First thing we need to do is upload your icons onto 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 links for both desktop and mobile devices.

Step 3

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

* 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. Then 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 codes for link 2 and link 3.

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, expressed 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.