Jump to content

Marquee: Social icons in header?

Recommended Posts

  • 2 months later...
  • Replies 14
  • Views 43.6k
  • Created
  • Last Reply
  • 4 months later...

I have spent hours looking for a solution to this issue and have finally found one! Or at least a work around. You will need to know a bit about coding however, so hopefully you’ve got that.

You can add social links into the top navigation by doing the following:

  1. Go to your Navigation settings page
  2. Click “+ Page” (bottom of “Main Navigation”)
  3. Select “Link” from the options

alt text

Write the code, as you would if you were writing an HTML image link >
For example my Facebook nav icon link is:

<img src="https://static.squarespace.com/static/52faa431e4b06b4beaf4355c/t/533aaf52e4b041bac4e3366d/1396354899016/facebook?format=100w" alt="facebook">

So it would be:

<img src="image URL" alt="facebook">

Then, in the link area of the same window, paste the page URL you want to link to.

Save and finish!

You can then resize your images, move them or style them however you’d like through custom CSS.

Here’s how mine ended up.

alt text

Really hope this all helps!

FULL credit for this solution and a HUGE thank you goes to Brok, original question & answer.

Designer, Developer, Marketing Consultant, Creative Enthusiast

Link to comment
  • 1 month later...
  • 4 weeks later...

There's also another way to do this, going along the same lines but it has slightly fewer steps so might be of interest.

You can use Font Awesome icons (you just need to add a line of code to your website header via the "Code Injection" section in the settings) and then use their icon codes instead of the image code when you're adding a link to the navigation.

For example, using their Twitter code, add this to the title section:

<i class="fa fa-twitter"></i>

Then just add the Twitter link in the URL section.

You can also adjust the size, for example, this would make it double in size:

<i class="fa fa-twitter fa-2x"></i>

You can actually make changes in the normal style editor too as it's just like another font, so you can edit the colours etc. (exactly what you can do will depend on your template) without having to use any CSS (although you can style it with CSS too if you want).

More information here: Font Awesome Examples

This would also work if you wanted any other icons in your navigation as they have a large library of different icons.

Hope that helps, this is my first answer on here so I'm not sure of etiquette, should I post this on the other similar threads too? I will second the thanks to Brok whose initial response led me down this path!

Link to comment
  • 3 weeks later...
  • 5 months later...
  • 1 month later...
  • 2 months later...

Thank you so much for showing this! I have no idea how to find my other links though like Twitter and SoundCloud.

You wrote:

For example my Facebook nav icon link is: <img src="https
static.squarespace.com/static/52faa431e4b06b4beaf […] 041bac4e3366d/1396354899016/facebook?format=100w" alt="facebook">

How did you know that that was your Facebook nav icon link? Where can I find mine? Where are the other social media icons?

Thank you!

Link to comment

Hey Daniell, here's some info for both methods, custom and font awesome.

Custom: To answer your question, I'll prelude by saying something that may be obvious to some, but not to others--

  1. Make sure you have uploaded all of your custom social icon images that are to be referenced and used with the social links.

Uploading custom images/icons:

  1. Create a page in the "Unlinked Pages" section
  2. Upload images on that page
  3. Grab Image Links: Go to page where your images are, right click and "copy image location" or "view image" & copy the address in the URL

  4. Continue as per answer previously submitted

Font-Awesome:The more simplistic route if you don't have custom images/icons.

  1. Just follow the instructions in the top answer submitted by KatyC on this page!


I also answered another question on here with font-awesome instructions if you need more info or are having trouble:http://answers.squarespace.com/questions/18091/add-or-move-social-icons-to-header-in-marquee-template/56671

Designer, Developer, Marketing Consultant, Creative Enthusiast

Link to comment
  • 2 weeks later...

Thank you!

Any ideas how to get them on their own line, either below or beneath the navigation? Still in the header if necessary, just on their own line?

I thought about changing the fa to display:block vs. inline block but I just noticed it's already in block. I'm working on this and would love it if I could somehow separate the social icons from the navigation. I'm using Hadley btw.


Link to comment
  • 3 years later...


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.