How to Add Social Icons to Your Main Navigation in Squarespace

 
 
 

 

Have you seen websites with awesome icons in the navigation (or anywhere else) and wonder how they do it?

In Squarespace, there’s a few different ways to add Social Icons to your site.

You can of course use the Social Links block. You can add this on your website anywhere you can add a block. This feature is awesome and easy, but what about when you want to add them into your navigation?

Well, you can always choose the Brine template family. If you choose a template that falls under the Brine family, there is a section in the Style Editor where you can enable social icons in your main navigation - pretty cool huh!


But what if you’re NOT using the Brine template and you want social icons in your navigation?

Well, I’ve got the solution for you! And it’s called Font Awesome.

Font awesome is a font full of awesome icons (social and more) that can be embedded onto your site and used ANYWHERE, including the navigation.

It requires a little bit of coding, but it’s super easy!
 


Step one

The first thing we need to do is copy this code:
 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 

And paste it into to your Code Injection header area. You can find your Code Injection under Settings > Advanced > Code Injection.

How to add social media links in your main menu navigation Squarespace3.png

NOTE: This is now considered a premium feature, if you see a note saying “Premium Feature Only” you will need to upgrade your website plan to Business.

Make sure to click Save when you’ve pasted in the code.

Once this code is in, the rest is super easy.


Step Two

First you will need to choose your icons. You can view the complete list of Free icons here: https://fontawesome.com/icons?d=gallery&m=free

Under each icon you will see that it has a name. For example purposes, I’m going to use facebook-square:

Once you have chosen the icons you want to use, we can add them in your navigation!


Step three

Header over to Pages and we’re going to Add New > Link.


The link title is where we are going to enter our new icon. Copy and paste the folling code


<i class="fa fa-facebook-square"></i>


And replace the “facebook-square” with the name of your icon.

Then under Link add an external link to your social media page. It should look something like this:

 
How to add social media links in your main menu navigation Squarespace7.png
 

 

Hit Save and the icon will show up in your navigation! (Your may need to refresh the page before you will see it).

Easy, right?

 

The cool thing about this, is that you can add any icons you want (as long as they are available on font awesome) and you can add them anywhere throughout your site! You can use social icons or even more creative icons like a House Icon for your Home page or a Letter Icon for your Contact Page. You can link them away from your site to social media, or you can link them to a page on your site.


If you want to add them in the body of your website, you’ll just need to add a Code Block and paste in the same code:


<i class="fa fa-facebook-square"></i>


Or you can use these alternative codes to give the icons a size and a color:

<i class="fa fa-facebook-square" style="font-size:48px;"></i>

<i class="fa fa-facebook-square" style="font-size:100px; color:#33CCCC;"></i>

 

The options with these icons are almost endless!

I hope you have enjoyed this quick and easy tutorial! Let me know in the comments how you have used these icons!

 
 

Related Posts