Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 5

Marquee: Social icons in header?



  • Answers 14
  • Created
  • Last Reply

Top Posters For This Question

14 answers to this question

Recommended Posts

  • 7

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
  • 5

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.

Edited by bakerbrite
Misc tidy

Designer, Developer, Marketing Consultant, Creative Enthusiast

Link to comment
  • 1

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!

Edited by Daniell
Link to comment
  • 0

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

Edited by bakerbrite

Designer, Developer, Marketing Consultant, Creative Enthusiast

Link to comment
  • 0

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.


Edited by vectorgirl
Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

  • Create New...