How to add Social Media Icons to Squarespace Navigation

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.

Squarespace website for an interior designer

I recently ran into this issue when working on a Squarespace website for Jennifer Gustafson, a Bay-area 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 this 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">
 
header-code-injection.jpg
 

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.

 
social-media-links.jpg
 

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.


And that’s all there is to it! If you’ve found this tip helpful, comment below with a link to your website.


Changing Padding Between Social Media Icons (or any Navigation Items) in the Avenue Template

(This note is in reply to Isa’s comment below.)

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; }