Jump to content

adding one unique social account link per page

Recommended Posts

  • Replies 9
  • Views 2.4k
  • Created
  • Last Reply

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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

Archived

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.