Adding an Icon to a Header in Nav in Squarespace
So you want to add an icon to a page title or header in the navigation of your Squarespace site. If you have found yourself in this position, you may have also found that everyone makes different recommendations and has different solutions for this. Many of these do not work. Well, look no further, this frustrating journey ends here. Here is what we figured out to actually accomplish this.
Step 1. Find the Icon You Need
You may have already completed this step, in which case, continue on to step 2. Otherwise, you’re going to want to find the icon (or icons) that you would like to add to your nav. You can have just one, or you can have different icons for each item in nav. The sky’s the limit. You’re going to want to make sure that it is a small enough file, we found that 500x500px works just fine. It will also need to be on a transparent background. There are some websites that offer icons, or you can use a program like Canva to find one. Wherever you find your icon, make sure to save it as a png.
Step 2. Save the File in Squarespace
Next, you are going to want to add this file to Squarespace. To do this, you go to Design > Custom CSS (Note: you won’t be able to add custom CSS if you have the base/personal package in Squarespace. You will need to have the business package or higher). Next, click ‘Manage Custom Files’ and upload the file.
Step 3. Add the Code
Now for the meat of it. This is the code you are going to want to use:
.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item a[href="/"]::before {
content: '';
height: 20px;
width: 20px;
background: url('');
background-size: contain;
background-repeat: no-repeat;
vertical-align: -3px;
display: inline-block;
}
Step 4. Add the Icon
Where it says ”background: url('');” you are going to add the link to the icon you uploaded. To do this, click into the space between the two quote marks so that your cursor is there. Then click on “Manage Custom Files” again and click on the icon file that you wish to use. This will automatically add its unique URL within Squarespace.
Step 5. Adjust
Now that you have all that set up, you can make any adjustments. You can change the position of the icon where it says “.header-nav-item:nth-child(1)”, the number in the parenthesis corresponding to its number position in the nav. Where it says “content: '';”, you are going to leave that empty. Don’t ask us why, but having that empty content bracket is vital to making this actually work. To change the size of the icon, simply change the number of pixels in its height and width.
Step 6. Repeat
This step is only for those that want to use multiple icons or in their nav. To do so, simply repeat this process, copying and pasting the entire code above, but adjusting the position in “.header-nav-item:nth-child(1)” and, if you want to use different icons, changing the URL in the ”background: url('');”. Like this:
.header-nav-item:nth-child(1) a::before,
.header-menu-nav-item a[href="/"]::before {
content: '';
height: 20px;
width: 20px;
background: url('');
background-size: contain;
background-repeat: no-repeat;
vertical-align: -3px;
display: inline-block;
}
.header-nav-item:nth-child(2) a::before,
.header-menu-nav-item a[href="/"]::before {
content: '';
height: 20px;
width: 20px;
background: url('');
background-size: contain;
background-repeat: no-repeat;
vertical-align: -3px;
display: inline-block;
}
… and so on.
We hope you found this helpful. Don’t hesitate to reach out if you have any questions or need any additional support in Squarespace or simply with your website.
