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 navbar we’ll have to use HTML.

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>

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>

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>

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>

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>

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.

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>

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

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

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

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

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

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>

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

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

Until next time,

B.

Full code

<!-- HTML INSIDE SITE HEADER -->
<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>

/*STYLES FOR CUSTOM SOCIAL ICONS BAR*/
#socialicons-bar {
  background: #353956;
  text-align: right;
}
#socialicons a {
  display: inline-block;
  margin: 8px 5px;
}
#socialicons {
  margin-right: 8px;
}
#socialicons img {
  width: 27px;
}