How to Replace Squarespace's Social Icons with FontAwesome

Squarespace has many amazing design features but their social icons are a hot mess. Some are punch-out style, some are outline style and the spacing is off. (See below.) This is particularly bad if you’re adding them to your header navigation, where they’ll be among the first things visitors see on your website.

I prefer to use Font Awesome icons instead. They’re elegant, versatile, and easy to install. Here’s how you can add Font Awesome social icons to the header of your Squarespace website. 

First, you’ll need to install Font Awesome’s CDN code on your website. To do that, copy the code below. Then, in your site panel, click on Settings > Advanced > Code Injection and drop the code in the header section.

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">

Next, we need to choose which icons to use. You can find all of Font Awesome’s free icons here. Once you’ve find the icon you want to use, copy the icon HTML code. Here’s what it looks like:

<i class="fab fa-facebook-f"></i>

In your site panel, click on Pages. We’re going to add the icons as secondary navigation links. To do that, click the + next to “Secondary Navigation” and paste the icon code under “Link Title.” Then add the link to the corresponding social profile under “Link.”

Repeat this process for all of the social icons you want to add to your header and arrange them in whatever order you want. You can adjust the size and color of the icons in the style editor.

Have any questions, comments, or want to request a specific Squarespace tutorial? Leave a comment below!