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.
Want me to do it for you? Book me for a 30 minute Squarespace session and I'll take care of it!
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">
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.