How to add Social Media Icons to Squarespace Navigation
In some Squarespace templates (like the Brine family), adding Social Media icons to the header navigation is a built-in function of the template. But in other template families like York, Avenue, Bedford, and Pacific, it requires a bit of a workaround.
(Note: This solution does NOT work for newer Squarespace 7.1 templates, but is still valid for many older Squarespace templates. If you are looking for a solution to add other social icons to Squarespace 7.1 check out this blog post: Show different social links or icons in Squarespace (walkthrough video)
I recently ran into this issue when working on a website for an interior designer using the Artesia (York family) template. We wanted her Social Media icons to appear in the main navigation area of the header, which is not a native function in York. After some Google searches, I found a Squarespace forum post with a superb reply from Katy at The Wheel Exists solving the problem using Font Awesome icons. Here’s Katy’s solution in action:
Step 1: Copy and paste the stylesheet code below into Settings > Advanced > Code Injection into the HEADER box.* (You can check fontawesome.com to be sure this is the most recent CDN code to serve up the icons.)
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
Step 2: In Pages, click the + beside the navigation area you want to use (we used Secondary Navigation in the example above) and under Create New Page choose Link.
For Link Title add the Font Awesome code for the icon from their site. For example, instagram is
<i class="fab fa-instagram"></i>
And for Link you’ll just paste in your social media url and remember to click “Open in New Window,” as it’s best practice to open a new window when linking to another website.
Optional Step 3: You can change up the size of the icons like so:
<i class="fas fa-instagram fa-lg"></i>
And you can change the color, too:
<i class="fa fa-instagram" style="color:#9b6954;"></i>
*You’ll need the Squarespace Business plan to access the premium Code Injection block.
Changing Padding Between Social Media Icons (or any Navigation Items) in the Avenue Template
For the Squarespace Avenue template you'll need to add this to Custom CSS. Adjust the margin-right value until you get the look you want. The "-n" means go from right to left and "+3" means 3 items. If you want the social media to go first, you'd use (n+4) instead for the first 4 items, etc...
/* change spacing for last 3 navigation items in the Avenue Template */
#topNav nav li:nth-last-child(-n+3) { margin-right: 5px; }