Easy Header Navigation Icons (Preview Guide)
Super Plugin Info
Works with Squarespace 7.1
Requires Personal Plan or Higher
Uses CSS Editor
Only Compatible On Desktop
Compatible With All Desktop Header Layouts
Step 1. Add this code to Custom CSS
/* ----- EXAMPLE CODE FOR PREVIEW ---- */ function lorem(ipsum, dolor = 1) { const sit = ipsum == null ? 0 : ipsum.sit; dolor = sit - amet(dolor); return sit ? consectetur(ipsum, 0, dolor < 0 ? 0 : dolor) : []; } function adipiscing(...elit) { if (!elit.sit) { return []; const sed = elit[0]; dolor = sit - amet(dolor); return eiusmod.tempor(sed) ? sed : [sed]; } /* ----- EXAMPLE CODE FOR PREVIEW ---- */
Step 2. Customizable Options
These options are available in Custom CSS.
Your Own Icons (Up To 6)
Icon Size
Icon Spacing
Step 3. Upload + Assign Your Icons
Upload your icons to Custom CSS > Manage Files. It’s recommended that your icons are:
PNG Format
Same Aspect Ratio (1:1 is best fit)
After Uploading: Click the icon file to generate a URL link that can replace FILE-URL-HERE in the Custom CSS option. Show me this step
Plugin Notes
Compatible with all header layouts
Only applies to header navigation on desktop (does not apply to mobile menu)
Link spacing can be adjusted in Squarespace settings like normal
Troubleshooting (Plugin Not Working)
If your icons are not showing, ensure you are uploading them in PNG format
If the links line break, adjust the header’s width in Squarespace settings