Jump to content

adding one unique social account link per page

Recommended Posts

Yes! I've done this ( the same social icon but with different links) even within one page using FontAwesome. You can see it in action here. It requires a bit of finesse. You'll need to use code blocks and Font Awesome. I have a post on adding Social Icons to the nav bar using the same method, so you could follow these steps and just use a code block rather than putting things in the nav. 

Step 1. Copy and paste the stylesheet code from Font Awesome in your Code Injection

Step 2. Add a code block with the icon and link you want. Here's an example:

<a href="https://www.yourlinkhere.com" target="_blank">
  <i class="fab fa-facebook-f"></i>
    </a>

 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 1 year later...
On 1/19/2021 at 7:35 PM, alia_cmt said:

Hello,

Is there a solution for the Personal plan? 

I'm using Brine 7.0, and need to add 3 different emails and LinkedIn accounts on one page.

Thank you

Do you still need help?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
On 1/5/2020 at 10:28 PM, christyprice said:

<a href="https://www.yourlinkhere.com" target="_blank"> <i class="fab fa-facebook-f"></i> </a>

  •  

Works wonderfully! However I would like to increase the spacing between the social links. Is there a code that I could add to the code block that includes all the links?

Link to comment

@antoinejoly

Please post the URL for a page on your site where you want to achieve this effect.

If your site is not public please set up a site-wide password, if you've not already done so. Post the password here.

We can then take a look at your issue.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

Link to comment

@antoinejoly

Replace your code block HTML, make copy somewhere, with the following.

<style>

  .cb-social-icons {
  
    margin : 0 6px;
    
  </style>

<a class="cb-social-icons" href="https://www.instagram.com/sab_artdesign/" target="_blank">

  <i class="fab fa-instagram fa-lg">
  
    </i>
    
  </a>

<a class="cb-social-icons" href="https://www.facebook.com/sab_artdesign-104802451472665 " target="_blank">

  <i class="fab fa-facebook fa-lg">
  
    </i>
    
  </a>

<a class="cb-social-icons" href="https://mailto:antoinejoly13@gmail.com" target="_blank">

  <i class="far fa-envelope fa-lg">
  
    </i>
    
  </a>

Let us know how it goes.

Find my contributions useful? Please like, upvote, mark my answer as the best ( solution ), and see my profile. Thanks for your support! I am a Squarespace ( and other technological things ) consultant open for new projects.

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...

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.