Add custom social icons to your Squarespace header

If you’re doing a custom design, you may be wanting to go all in with things like colors, fonts, patterns and icons.

So, if you want to include those gorgeous social media icons you – or your graphic designer –created, keep reading my friend because we’ll be looking at how you can add custom social media icons to your Squarespace header!

Creating an additional header

The bad news is that to add custom icons to your nav bar we’ll have to use HTML, similar to what I did when I created a secondary nav bar for a Squarespace site.

The good news is that it’s fairly easy! So let’s get to it.

First, go to Settings > Advanced > Code Injection to add the new icons bar to the top of every page of your site.

We’ll be creating a simple container that will act as the background of our social media bar. I’ll give it an ID of socialicons-bar.

<div id="socialicons-bar">
  
</div>
1. Creating an additional header in Squarespace.png

Next, we’ll be creating another container inside it. This will be the wrapper holding all of our icons and I’ll give it an ID of socialicons.

By having this inside the previous container, it will be super easy for us to realign the icons!

<div id="socialicons-bar">
  <div id="socialicons">
    
  </div>
</div>
2. Creating an extra nav bar in Squarespace.png

Inside that last wrapper we’ll be adding a tags so that anything we place inside them (text or images) is clickable.

I’ll be adding 4 links, but you can use less or more depending on how many social icons you’re planning to add.

<div id="socialicons-bar">
  <div id="socialicons">
    <a></a>
    <a></a>
    <a></a>
    <a></a>
  </div>
</div>
3. Adding extra links to Squarespace header.png

Great. Now, we can give each link its corresponding hyperlink.

I’m going to be working with Twitter, Facebook, Pinterest and Flicker (‘cause why not?) in that order.

<div id="socialicons-bar">
  <div id="socialicons">
    <a href="https://www.twitter.com/username"></a>
    <a href="https://www.facebook.com/username"></a>
    <a href="https://www.pinterest.com/username"></a>
    <a href="https://www.flicker.com/username"></a>
  </div>
</div>
4. Creating an additional nav bar in Brine.png

Then, if you’re working with pure text you can simply type it in between each set of a tags, however since I want to add custom social icons I’ll be adding images.

Therefore, I need an img tag in between each of my link tags.

Each img tag will have a src and alt attribute so I can fill in the information for each social icon.

<div id="socialicons-bar">
  <div id="socialicons">
    <a href="https://www.twitter.com/username"> <img src="" alt="Twitter"/> </a>
    <a href="https://www.facebook.com/username"> <img src="" alt="Facebook"/> </a>
    <a href="https://www.pinterest.com/username"> <img src="" alt="Pinterest"/> </a>
    <a href="https://www.flicker.com/username"> <img src="" alt="Flicker"/> </a>
  </div>
</div>
5. Adding images to header in Brine.png

As you can see, FINALLY things are happening on our site.

We now have those broken link icon thingies along with the alt text we gave each image at the top of our screen.

Time to add the icons!

To do this, we need to either link to our images saved in an image hosting website, or simply upload them to our site through the CSS window and grab the link from there.

Just click on the “Manage Custom Files“ button at the bottom of your Custom CSS window, upload each of your icons and then click on the file to bring up their corresponding URL inside the window.

7. Using images in CSS in Squarespace.png

Once you have all your links, I recommend pasting them on a post it note on your desktop or a word document so its easier to copy/paste instead of having to go back to this window each time.

Don’t forget to DELETE the URL’s from the CSS window!!

Heading back to our HTML inside the Code Injection section, paste each of the image links inside its corresponding src attribute.

<div id="socialicons-bar">
  <div id="socialicons">
    <a href="https://www.twitter.com/username"> <img src="https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bb77a3b15fcc01ec7ebb1a1/1538751035020/Twitter+Chalky+Blue.png" alt="Twitter"/> </a>
    <a href="https://www.facebook.com/username"> <img src="https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bb77a308165f56f13512a83/1538751024576/Facebook+Moss.png" alt="Facebook"/> </a>
    <a href="https://www.pinterest.com/username"> <img src="https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bb77a3fe5e5f0e862a0c3c7/1538751039696/Pinterest+Peach.png" alt="Pinterest"/> </a>
    <a href="https://www.flicker.com/username"> <img src="https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bb77a3341920280bb15d778/1538751027942/Flickr+Rose.png" alt="Flicker"/> </a>
  </div>
</div>
8. Adding custom social media icons to Squarespace.png

Alright! Our images are finally in place!!

Huge, but in place.

Styling the custom social icons

It’s time to move onto our Custom CSS window to style the bar a little bit.

I’ll begin by giving our new bar a background color, so I’ll be targeting the main container #socialicons-bar

#socialicons-bar {
  background: #353956;
}
9. Adding custom social media icons to Brine.png

And now how about we realign the icons to the right?

We can use text-align for that.

#socialicons-bar {
  background: #353956;
  text-align: right;
}
10. Adding an extra header with social media icons to Squarespace.png

We can space them out a bit, so let’s set each a element as inline-block to give them a margin.

#socialicons a {
  display: inline-block;
  margin: 8px 5px;
}
11. Creating a secondary nav bar in Brine.png

And let’s push all the icons further from the right edge by giving the socialicons container a margin as well.

#socialicons {
  margin-right: 8px;
}
12. Custom social media icons in Brine.png

Last but not least, let’s shrink down the images!

We’ll target the img element inside our socialicons container. I’ll give them a width of 27px.

#socialicons img {
  width: 27px;
}
13. Custom social media icons in Squarespace.png

Gorgeous!!

And btw, if you want to have the links open in a new tab, you can always go back into your HTML and add target=”_blank” to each of your a tags!

<div id="socialicons-bar">
  <div id="socialicons">
    <a href="https://www.twitter.com/username" target="_blank"><img src="https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bb77a3b15fcc01ec7ebb1a1/1538751035020/Twitter+Chalky+Blue.png" alt="Twitter"/></a>
    <a href="https://www.facebook.com/username" target="_blank"><img src="https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bb77a308165f56f13512a83/1538751024576/Facebook+Moss.png" alt="Facebook"/></a>
    <a href="https://www.pinterest.com/username" target="_blank"><img src="https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bb77a3fe5e5f0e862a0c3c7/1538751039696/Pinterest+Peach.png" alt="Pinterest"/></a>
    <a href="https://www.flicker.com/username" target="_blank"><img src="https://static1.squarespace.com/static/594024cc1b631b47dc1de9e2/t/5bb77a3341920280bb15d778/1538751027942/Flickr+Rose.png" alt="Flicker"/></a>
  </div>
17. Opening social media icons in blank page.png

Here’s the final result in all three screen sizes!

14. Custom social media icons.png
15. Custom social media icons in tablet.png
16. Custom social media icons in Brine mobile.png

So there you go, that’s how you can add custom social icons to your Squarespace site!

Until next time,

B.

 

Full code

HTML

<div id="socialicons-bar">
  <div id="socialicons">
    <a href="https://www.twitter.com/username" target="_blank"> <img src="your-url-1" alt="Twitter"/> </a>
    <a href="https://www.facebook.com/username" target="_blank"> <img src="your-url-2" alt="Facebook"/> </a>
    <a href="https://www.pinterest.com/username" target="_blank"> <img src="your-url-3" alt="Pinterest"/> </a>
    <a href="https://www.flicker.com/username" target="_blank"> <img src="your-url-4" alt="Flicker"/> </a>
  </div>
</div>

CSS

#socialicons-bar {
  background: #353956;
  text-align: right;
}
#socialicons a {
  display: inline-block;
  margin: 8px 5px;
}
#socialicons {
  margin-right: 8px;
}
#socialicons img {
  width: 27px;
}